Blazor | ComponentOne
Controls / FlexGrid / Styling
In This Topic
    Styling
    In This Topic

    FlexGrid offers different ways of styling the grid data, rows and columns which makes it easier to design your application. You can customize the columns headers, text color, gridlines, cell background, and other elements of the FlexGrid. 

    FlexGrid contains many properties that allow you to easily style all visual aspects of the grid. In this section, we will see the different ways to customize the appearance of the grid.

    Using CSS classes

    You can customize the grid using CSS classes. FlexGrid has two main CSS classes; .flexgrid-cell span used to style the column header cells and .flexgrid-cell used to style the data cells. In the following example, the column headers and cell data of the FlexGrid has been styled as shown in the image below.

    FlexGrid styling

    Following code example demonstrates how to customize cells in FlexGrid using CSS classes.

    <h3>FlexGrid Styling using the CSS classes</h3>
     <style>
            /* Style the ColumnHeaders of FlexGrid*/
            .custom .flexgrid-cell span {
                 font-weight: bold;
                 font-style: normal;
                 color: black !important;
            }
            /* Style the FlexGrid normal cells
// Any property set for following class should also be set to above class to avoid same styling for Headers and Cells
          */
            .custom .flexgrid-cell {
                 color: red;
                 font-style: italic;
            }
     </style>
     <FlexGrid Class="custom" ItemsSource="@forecasts"></FlexGrid>

    Using API members

    The different elements of FlexGrid such as rows, columns, headers, cells, selection etc. can by styled using the available API members. The styling API members of type C1Style are designated to different elements of the grid which helps in styling the elements with large data set of styling attributes such as change font color, cell background etc. 

    The API members available in C1Style are listed below.

    API member Description
    ColumnHeaderStyle Styles the column header cells
    ColumnHeaderSelectedStyle Styles the selected column header cells
    EditorStyle Styles the cell editor
    SelectionAdornerStyle Styles the selection adorners
    SelectionStyle Styles the selected cells
    RowStyle Styles the row cells
    RowHeaderStyle Styles the row header cells.
    RowHeaderSelectedStyle Styles the selected row header cells
    CursorStyle Styles the cursor cell
    AlternatingRowStyle Styles the alternating rows
    GroupRowStyle Styles the Group row
    NewRowStyle Styles the new row
    CellStyle Styles the FlexGrid cells
    GridLinesBrush Paint the lines between cells
    ColumnHeaderGridLinesBrush Sets the color of the lines between the column header cells
    TopLeftHeaderStyle Styles the top left header

    Further, you can set the background color for the columns by setting the Background property. The image below displays styling of the FlexGrid using API members. 

    Styling FlexGrid

    Following code example demonstrates how to customize cells in FlexGrid using API members.

    Razor
    Copy Code 
    <FlexGrid @ref="grid" ItemsSource="@forecasts"
          AutoGenerateColumns="false"
          HeadersVisibility="GridHeadersVisibility.All"
          ColumnHeaderGridLinesVisibility="GridLinesVisibility.All"
          RowHeaderGridLinesVisibility="GridLinesVisibility.All"
          TopLeftHeaderGridLinesVisibility="GridLinesVisibility.All"
          ColumnHeaderGridLinesBrush="@("#ffff00")"
          TopLeftHeaderStyle="@("background-color:#FFC0CB; color: #ffffff;")"
          ColumnHeaderStyle="@("background-color:#FFC0CB; color: #ffffff;")"
          RowHeaderStyle="@("background-color:#FFC0CB;")">
    <FlexGridColumns>
        <GridColumn Binding="Date" Header="Date">
        </GridColumn>
        <GridColumn Binding="TemperatureC" Header="Temperature C">
        </GridColumn>
        <GridColumn Binding="TemperatureF" Header="Temperature F">
        </GridColumn>
        <GridColumn Binding="Summary" Header="Summary">
        </GridColumn>
    </FlexGridColumns>
</FlexGrid>

@code {
    private WeatherForecast[]? forecasts;
    protected FlexGrid grid { get; set; } = new();

    //FlexGrid data
    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            grid.Columns[0].Background = C1Color.SkyBlue;
            grid.Columns[3].Background = C1Color.SkyBlue;

        }
        return base.OnAfterRenderAsync(firstRender);
    }
}

    Using CellTemplate

    CellTemplate allows you to define a template for styling data cells in the FlexGrid. In this example, a span element is wrapped to cell content in CellTemplate HTML markup and any style applied to the span element customizes the cell appearance. 

    Here, a few styles are directly applied through the span while other styles have been conditionally applied by evaluating the cell values as shown in the image below.

    Styling cell template

    Following code example demonstrate how to customize cells in FlexGrid using CellTemplate.

    <h3>Styling using the CellTemplate</h3>
     <FlexGrid AutoGenerateColumns="false" ItemsSource="@forecasts">
          <FlexGridColumns>
               <GridColumn Binding="Date" Header="Date">
                    <CellTemplate>
                         <span style="color:coral;font-style:italic;">@context</span>
                    </CellTemplate>
               </GridColumn>
               <GridColumn Binding="TemperatureC" Header="Temperature C">
               </GridColumn>
               <GridColumn Binding="TemperatureF" Header="Temperature F">
                    <CellTemplate>
                         @if (Double.Parse(context.ToString()) > 64.8 && Double.Parse(context.ToString()) < 95)
                         {
                              <span style="color:green;font-style:italic;">
                                   @context
                              </span>
                         }
                         else
                         {
                              <span style="color:red;font-style:italic;">
                                   @context
                              </span>
                         }
                    </CellTemplate>
               </GridColumn>
               <GridColumn Binding="Summary" Header="Summary">
                    <CellTemplate>
                         <span style="color:lightgreen;font-style:italic;">@context</span>
                    </CellTemplate>
               </GridColumn>
          </FlexGridColumns>
     </FlexGrid>