Articles in this section
Category / Section

How to show or hide columns dynamically?

1 min read

In the button click event, you can show/hide the columns dynamically by using the showColumns/hideColumns methods of the Grid, respectively.

The following is the argument of the show/hide columns method.





ColumnName should be the field or the headerText of the column.


In the following code examples, the CustomerID column is shown or hidden in the Grid.


<script type="text/javascript">
                // The DataSource "window.gridData" is referred from the jsondata.min.js.
                dataSource: window.gridData,
                allowPaging: true,
                pageSettings: { pageCount: 7 },
                columns: [
{ field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right },
{ field: "CustomerID", headerText: 'Customer ID', textAlign: ej.TextAlign.Left },
{ field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right },
{ field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right },
{ field: "OrderDate", headerText: 'Order Date', textAlign: ej.TextAlign.Right, format: "{0:MM/dd/yyyy}" }
           $("#Hide").ejButton({ text: "Hide", size: "small", click: "showhide" });
           $("#Show").ejButton({ text: "Show", size: "small", click: "showhide" });



        .Columns(col =>
col.Field("CustomerID").HeaderText("CustomerID ").TextAlign(TextAlign.Left).Add();  col.Field("EmployeeID").HeaderText("EmployeeID").TextAlign(TextAlign.Right).Add();
col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right). Format("{0:MM/dd/yyyy}").Add();
        .ClientSideEvents(eve => { eve.Click("showhide"); })
        .ClientSideEvents(eve => { eve.Click("showhide"); })



<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">
<ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right"/>
<ej:Column Field="CustomerID" HeaderText="Customer ID" TextAlign="Left" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right"/>
<ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Format="{0:MM/dd/yyyy}" />
<ej:Button ID="Hide" runat="server" Text="Hide" ClientSideOnClick="showhide"> </ej:Button>
<ej:Button ID="Show" runat="server" Text="Show" ClientSideOnClick="showhide"> </ej:Button>


<script type="text/javascript">         
     function showhide() {
        var gridObj = $("#Grid").data("ejGrid");
            if (this.element[0].id == "Hide") 
                    gridObj.hideColumns("Customer ID"); //Uses field or headerText of column as the parameter.
                     gridObj.showColumns("Customer ID");//Uses field or headerText of column as the parameter.


The following screenshot displays the Hide and Show Customer ID columns:

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment