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

    FlexGrid can be responsively sized where the column widths can adjust automatically to fill the entire available space irrespective of the browser and device.

    You can define the size of columns of FlexGrid using GridLength struct and assigning the Star property to set the the width of each column automatically with respect to available screen space. This avoids horizontal scrolling and display the entire data on the screen.

    The image below shows how the FlexGrid appears, after star and auto sizing are applied to columns.

     Column auto sizing

     

    The following code example demonstrates sizing in FlexGrid where the Star property is assigned to set the default column width in the grid.

    Razor
    Copy Code
    @page "/FlexGrid/ResponsiveSizing"
    @using Localization
    @using System.Collections.ObjectModel;
    @using C1.Blazor.Core
    @using C1.Blazor.Grid
    
    <FlexGrid ItemsSource="customers"
              DefaultColumnWidth="GridLength.Star"
              AutoGenerateColumns="false"
              Style="@("max-height:50vh")">
        <FlexGridColumns>
            <GridColumn Binding="FirstName" />
            <GridColumn Binding="LastName" />
            <GridColumn Binding="LastOrderDate" Format="d" />
            <GridColumn Binding="OrderTotal" Format="N" />
        </FlexGridColumns>
    </FlexGrid>@*ColumnHeaderFontAttributes="Bold"*@
    
    @code {
        ObservableCollection<Customer> customers;
    
        protected override void OnInitialized()
        {
            customers = Customer.GetCustomerList(100);
        }
    }