Blazor | ComponentOne
Controls / FlexGrid / Columns / Column Header
In This Topic
    Column Header
    In This Topic

    FlexGrid allows you to change the column header from its default value. The implementation can se be seen in the example below. The Header property of GridColumn class is used to add reference name to the column headers which will be displayed in the FlexGrid.

     Column headers

    The following code example demonstrate how to customize Column Header  in FlexGrid.

    Razor
    Copy Code
    @page "/ColumnHeader"
    @using C1.Blazor.Core
    @using C1.Blazor.Input
    @using C1.Blazor.Grid
    <h1>Hello, world!</h1>
    
    Welcome to your new app.
    
    <p>
         Checkbox: <C1CheckBox IsChecked="@isActive"></C1CheckBox>
    </p>
    
    
    <p>
         TextBox: <C1TextBox @bind-Text="@country"></C1TextBox>
    </p>
    
    <p>
         BoundGrid with AutoGenerateColumns false<br />
         <FlexGrid @ref="grid" AutoGenerateColumns="false" ItemsSource="gridData">
              <FlexGridColumns>
                   <GridColumn Header="Country ID" Binding="Id"></GridColumn>
                   <GridColumn Header="Country Name" Binding="Country"></GridColumn>
              </FlexGridColumns>
         </FlexGrid>
    </p>
    Click on Fetch data for AutoGenerateColumns FlexGrid <a href="/fetchdata">AutoGenerateColumns</a>
    
    @code{
         bool isActive = true;
         string country = "India";
         string[] countries;
         object grid = null;
         List<object> gridData = new List<object>();
         protected override void OnInitialized()
         {
              countries = "US,UK,Japan,India".Split(',');
              int i = 0;
              foreach (var item in countries)
              {
                   gridData.Add(new
                   {
                        Country = item,
                        Id = i
                   });
                   i++;
              }
         }
    }