How to hide column in mobile view

[Danyelle]

How do I hide a column in mobile view? I want to hide the Ground Length column. I want it to be visible in ipad/desktop view

<ejs-grid id="Grid" [email protected] dataBound="dataBound" height="510px" allowPaging="true"  allowSorting="true" allowFiltering="true" allowGrouping="true" allowReordering="true" allowResizing="false" allowMultiSorting="true" allowPdfExport="true" allowExcelExport="true" showColumnChooser="true" toolbarClick="toolbarClick" printComplete='printComplete' toolbar="@(new List<string>() { "Print", "PdfExport","ExcelExport","Search", "ColumnChooser"})">

        <e-grid-groupsettings columns="@(new string[] {"LocationDescription"})"></e-grid-groupsettings>

        <e-grid-filterSettings columns="filterColumns" type="Excel"></e-grid-filterSettings>

        <e-grid-pagesettings pageCount="6" pageSize="16" pageSizes="@(new string[] { "5", "10" , "16","20", "All" })"></e-grid-pagesettings>

        <e-grid-columns>

            <e-grid-column field="LocationDescription" headerText="Location" width="120"></e-grid-column>

            <e-grid-column field="ToolID" headerText="ID" width="50"></e-grid-column>

            <e-grid-column field="InventoryDescription" headerText="Description" minWidth="120" width="120"></e-grid-column>

            <e-grid-column field="GroundLength" headerText="Ground Length" width="130"></e-grid-column>

            <e-grid-column field="ToolID" headerText="Test" template="#temp" allowFiltering="false" width="80"></e-grid-column>

           ...

        </e-grid-columns>

    </ejs-grid>

[Shalini Maragathavel]

Hi Danyelle,

Thanks for contacting Syncfusion support.

You can achieve your requirement of hiding a column in mobile view using hideAtMedia property of Grid as demonstrated in the below code snippet, 

<ejs-grid id="Grid" dataSource="ViewBag.datasource"> 

    

    <e-grid-columns> 

      . . . 

        <e-grid-column field="EmployeeID" hideAtMedia='(min-width:1200px)' headerText="EmployeeID " textAlign="Right" width="120"></e-grid-column> 

        . . . 

 

    </e-grid-columns> 

 

</ejs-grid> 

In the below code, for EmployeeID column, hideAtMedia property value is set as (min-width: 1200px) so that EmployeeID column will gets hidden when the browser screen width is lessthan 1200px. Likewise you can set hideAtMedia  property as per your needs.

Please refer the below sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/filter_core-1706567330.zip 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#responsive-columns 

  

Please get back to us, if you need any further assistance. 


Regards,
Shalini M.