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 value is set as (min-width: 700px) so that OrderID column will gets hidden when the browser screen width is lessthan 700px.

@Html.EJS().Grid("ResponsiveColumn").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).HideAtMedia("(min-width: 700px)").Width("120").Add();
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").HideAtMedia("(min-width: 500px)").Add();
    col.Field("OrderDate").HeaderText("Order Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).HideAtMedia("(max-width: 500px)").Width("130").Format("yMd").Add();
    col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Format("C2").Add();

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