How to hide columns in mobile view

[Danyelle]

I have a grid with many columns that makes it difficult to read in mobile view so I would like to hide some of the columns in the grid, but not in the edit/add dialog when in mobile view.

So in desktop view, it looks like:

Right now in mobile view, it looks like:

I want to hide some of the columns so the fields are readable.

Here is my code:

 @Html.EJS().Grid("InventoryGrid").DataSource(DataManager => { DataManager.Json(@Model.Inventory.ToArray()).InsertUrl("/Home/AddInventoryItem").UpdateUrl("/Home/UpdateInventoryItem").Adaptor("RemoteSaveAdaptor"); }).AllowFiltering(true).AllowSorting(true).Columns(col =>

{

    col.Field("InventoryID").HeaderText("Id").IsPrimaryKey(true).IsIdentity(true).AllowEditing(false).Width("40").Add();

    col.Field("HECNumber").HeaderText("HEC Number").Visible(false).Add();

    col.Field("Description").HeaderText("Description").Width("90").Add();

    col.Field("IsActive").HeaderText("Active").ValueAccessor(booleanAccessor).Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).EditType("dropdownedit").Filter(new { type = "CheckBox", itemTemplate = "${ trustTemp(data) }" }).DefaultValue(true).Width("45").Add();

  ...

}).AllowPaging(true).ActionBegin("actionBegin").ActionComplete("actionComplete").FilterSettings(filter => { filter.Columns(filterColumns).Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).SortSettings(sort => sort.Columns(sortColumns)).PageSettings(page => page.PageSize(15)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit" }).Render()

[Ajith Govarthan]

Hi Danyelle, 

 

Thanks for contacting Syncfusion support. 

 

Query: I have a grid with many columns that makes it difficult to read in mobile view so I would like to hide some of the columns in the grid, but not in the edit/add dialog when in mobile view. 

 

Based on your query you want to hide some columns in the grid and also you want to make them visible while add and edit the records in the dialog component. So, we have prepared sample and in that sample we have used the actionBegin and actionComplete event to show and hide the columns while add and edit the records. 

 

In that event we have called the showColumns and hideColumns method to handle the columns visibility for mobile view alone. For your convenience we have attached the sample so please refer them for your reference. 

 

Code Example: 

Index.cshtml 

 

<div class="control-section"> 

    @Html.EJS().Grid("DefaultPaging").DataSource((IEnumerable<object> )ViewBag.datasource).DataBound("dataBound").ActionComplete("actionComplete").ActionBegin("actionBegin").Columns(col => 

        { 

 

        col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).Filter(new { type = "CheckBox" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

        col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add(); 

        col.Field("OrderDate").HeaderText("Order Date").Width("130").EditType("datepickeredit").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

        col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

        col.Field("ShipCity").EditType("dropdownedit").HeaderText("Ship city").Width("150").Add(); 

        col.Field("ShipAddress").EditType("dropdownedit").HeaderText("ShipAddress").Width("150").Add(); 

        col.Field("EmployeeID").HeaderText("EmployeeID").Width("150").Add(); 

 

        }).Height("400").AllowPaging().Toolbar(new List<string> 

            () { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Render() 

</div> 

 

<script> 

 

 

    var cancelFlag = true; 

    var flag = true; 

    function dataBound() { 

        if (ej.base.Browser.isDevice && flag) {          //will get executed in mobile view alone. 

            this.getColumnByField("ShipAddress").visible = false; 

            this.getColumnByField("EmployeeID").visible = false; 

            flag = false; 

            this.refreshColumns(); 

        } 

    } 

    function actionBegin(args) { 

        if (ej.base.Browser.isDevice) {  // hide the columns only in mobile view alone. 

            if (args.requestType === "beginEdit" || args.requestType === "add") { 

                this.showColumns(["ShipAddress", "EmployeeID"]); 

            } 

 

            if (args.requestType === "save") { 

                this.hideColumns(["ShipAddress", "EmployeeID"]); 

            } 

            if (args.requestType === "cancel" && cancelFlag) { 

                cancelFlag = false; 

                this.hideColumns(["ShipAddress", "EmployeeID"]); 

            } 

        } 

    } 

    function actionComplete(args) { 

        if (ej.base.Browser.isDevice) { 

            if (args.requestType === "cancel" && !cancelFlag) { 

                cancelFlag = true; 

                this.hideColumns(["ShipAddress", "EmployeeID"]); 

            } 

        } 

    } 

 

</script> 

 

   

   

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample_-_mvc_cols_hide1270849184.zip 

 

Note: Based on your query you can also use the autoFitcolumns feature to resize the columns width based on the header and content cell’s content.  Please refer the below documentation for more details. 

 

UG-Link: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#autofit-specific-columns 

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G.