Responsive Columns

2 Mar 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.

<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>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}