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.
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.
JS
<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>
The following screenshot displays the Hide and Show Customer ID columns: