Hiding Columns

[Ivan Petrov]

Hello,

Do you provide any built-in functionality for removing grid columns? Something like the filter functionality but there are checkboxes with the column names next to them.

[Vignesh Natarajan]

Hi Ivan,  

Thanks for contacting Syncfusion forums. 

Query: “Do you provide any built-in functionality for removing grid columns? Something like the filter functionality but there are checkboxes with the column names next to them.” 

Yes. We have in built support to show / hide columns using a check box. Using ColumnChooser feature you can hide the visible column / show the hidden column and the column chooser is rendered within the Grid toolbar. Refer the below code example and screenshot to enable the column chooser in Grid. 

<EjsGrid id="Grid" AllowPaging="true" ShowColumnChooser="true" toolbar="@(new List<string>() { "ColumnChooser" })"> 

    <EjsDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 

    <GridColumns> 

        <GridColumn Field="OrderID" HeaderText="Order ID" ISPrimaryKey="true" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="90"></GridColumn> 

        <GridColumn Field="CustomerID" HeaderText="First Name" Width="90"></GridColumn> 

        <GridColumn Field="EmployeeID" HeaderText="Employee ID" Width="90"></GridColumn> 

        <GridColumn Field="Freight" HeaderText="Freight" Width="90"></GridColumn> 

    </GridColumns> 

</EjsGrid> 

 

Note: Uncheck the check boxes of the corresponding column name and click the OK button, it will hide those columns.  

For your convenience we have prepared a sample which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/145584/ze/Hidecolumns-1680476869  

Please get back to us if you have further queries.   

Regards,
Vignesh Natarajan.