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.

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

Example:

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

<script type="text/javascript">
            $("#Grid").ejGrid({
                // 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" });
 </script>

MVC

@(Html.EJ().Grid<OrdersView>("HideColumn")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
        .Columns(col =>
        {  
col.Field("OrderID").HeaderText("OrderID").TextAlign(TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("CustomerID ").TextAlign(TextAlign.Left).Add();  col.Field("EmployeeID").HeaderText("EmployeeID").TextAlign(TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Add();
col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right). Format("{0:MM/dd/yyyy}").Add();
         })
)
@(Html.EJ().Button("Hide")
        .Text("Hide").Size(ButtonSize.Normal)         
        .ClientSideEvents(eve => { eve.Click("showhide"); })
)
@(Html.EJ().Button("btnShow")
         .Text("Show").Size(ButtonSize.Normal) 
        .ClientSideEvents(eve => { eve.Click("showhide"); })
)

ASP.NET

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">
         <Columns>
<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}" />
            </Columns>
</ej:Grid>
<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.
            else
                     gridObj.showColumns("Customer ID");//Uses field or headerText of column as the parameter.
      }
</script>