How to hide or show columns in the Mobile Grid control?
You can hide or show the columns in the Mobile Grid control by using the allowColumnSelector property. To enable the allowColumnSelector property, set it to true. The following code demonstrates the same.
<div id="container">
<div id="mobgridscrolling">
</div>
</div>
<script type="text/javascript">
$(function () {
// The datasource "window.gridData" is referred from jsondata.min.js.
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobgridscrolling").ejmGrid({
allowSelection: true,
dataSource: data,
allowPaging: false,
allowScrolling: true,
allowColumnSelector: true, //Enables the allowColumnSelector.
scrollSettings: { height: 420 },
columns: [
{ field: "OrderID", headerText: "Order ID" },
{ field: "CustomerID", headerText: "Customer ID" },
{ field: "Freight", headerText: "Freight" },
{ field: "EmployeeID", headerText: "EmployeeID" },
{ field: "ShipCity", headerText: "ShipCity" }
]
});
});
</script>
By enabling the allowColumnSelector property, you can access the list of columns that are to be hidden or shown in the Mobile Grid control. Once this property is enabled, an icon appears at the top right corner of the Mobile Grid, as shown in the following screenshot.
Figure 1: Icon at the top right corner of the Mobile Grid
When that icon is clicked, it navigates to the page that contains the list of columns where the desired columns are hidden from the Mobile Grid, as shown in the following screenshot.
Figure 2: Hidden columns
After the appropriate list is checked, click the Done button. Now, you can see the checked columns hidden from the Mobile Grid as follows.
Figure 3: Checked hidden Columns
Another way to show the hidden columns is by unchecking the items on the list. This shows or hides the columns in the Mobile Grid.
