Column Chooser in Blazor DataGrid

[Duong Quoc]

question: 

how to hide the "Order ID" column and when the user uses the "Column Picker" feature, the "Order ID" column cannot be selected?

code: 

@using Syncfusion.Blazor.Grids

@using BlazorApp1.Data

<SfGrid DataSource="@Orders" ShowColumnChooser="true" Toolbar=@ToolbarItems>

    <GridColumns>

        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.DateOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" TextAlign="TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

@code {

    public string[] ToolbarItems = new string[] { "ColumnChooser" };

    public List<OrderData> Orders { get; set; }

    protected override void OnInitialized()

    {

        Orders = OrderData.GetAllRecords();

    }

}

[Prathap Senthil]

Hi Duong Quoc,

Based on your requirement, if you want to hide a particular column, we suggest using the 'Visible' property of the 'gridcolumn' set to false. For hidden columns that you don’t want to select in the column chooser, we suggest using the 'ShowInColumnChooser' property set to false to achieve your requirement. Kindly refer to the code snippet and sample below for your reference.

<SfGrid DataSource="@Orders" ShowColumnChooser="true" Toolbar=@ToolbarItems>

    <GridColumns>

        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" Visible="false" ShowInColumnChooser="false" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.DateOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" TextAlign="TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

Sample Link:
https://blazorplayground.syncfusion.com/embed/hjBzDWXKfzAWWwfL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference:
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowInColumnChooser

Regards,
Prathap S