We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Hiding Columns

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.


1 Reply

VN Vignesh Natarajan Syncfusion Team July 1, 2019 06:38 AM

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  


Please get back to us if you have further queries.   

Regards,
Vignesh Natarajan. 


Loader.
Live Chat Icon For mobile
Up arrow icon