Responsive Columns in Grid Control

26 Oct 20221 minute to read

You can toggle column visibility based on media queries which are defined at the hideAtMedia. The hideAtMedia accepts valid Media Queries. In the below sample, for OrderID column, hideAtMedia property of e-grid-column is set as (min-width: 700px) so that OrderID column will gets hidden when the browser screen width is lessthan 700px.

CSHTML

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">     
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" hideAtMedia='(min-width: 700px)' width="120"  textAlign="Right"  ></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" hideAtMedia='(max-width: 500px)' width="150"></e-grid-column>        
        <e-grid-column field="OrderDate" headerText="Order Date" hideAtMedia= '(min-width: 500px)' textAlign="Right" format="yMd" width="130"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>      
    </e-grid-columns>
</ejs-grid>

Responsivecolumns.cs

public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}