Search results

Adaptive View in ASP.NET MVC Grid control

17 Sep 2021 / 1 minute to read

The Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, sort, and edit dialogs adaptively and have an option to render the grid row elements in the vertical direction.

Render adaptive dialogs

When we enable the enableAdaptiveUI property, the grid will render the filter, sort, and edit dialogs in full screen for a better user experience. This behavior is demonstrated in the below demo.

razor
default.cs
Copied to clipboard
@Html.EJS().Grid("adaptivebrowser").DataSource((IEnumerable<object>)ViewBag.DataSource).EnableAdaptiveUI(true).AllowPaging(true).AllowFiltering(true).AllowSorting(true).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").Width("180").IsPrimaryKey(true).ValidationRules(new { required = true, number = true }).Add();
    col.Field("Freight").HeaderText("Freight").Width("180").Format("C2").EditType("numericedit").ValidationRules(new { required = true }).Add();
    col.Field("CustomerID").HeaderText("Customer ID").Width("180").ValidationRules(new { required = true, minLength = 3 }).Add();
    col.Field("ShipCity").HeaderText("Ship City").Width("180").Add();
}).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).Render()
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Vertical row rendering

The grid will render the row elements in vertical order while setting the rowRenderingMode property value as Vertical.

razor
default.cs
Copied to clipboard
@Html.EJS().Grid("adaptivebrowser").DataSource((IEnumerable<object>)ViewBag.DataSource).EnableAdaptiveUI(true).RowRenderingMode(Syncfusion.EJ2.Grids.RowRenderingDirection.Vertical).AllowPaging(true).AllowFiltering(true).AllowSorting(true).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").Width("180").IsPrimaryKey(true).ValidationRules(new { required = true, number = true }).Add();
    col.Field("Freight").HeaderText("Freight").Width("180").Format("C2").EditType("numericedit").ValidationRules(new { required = true }).Add();
    col.Field("CustomerID").HeaderText("Customer ID").Width("180").ValidationRules(new { required = true, minLength = 3 }).Add();
    col.Field("ShipCity").HeaderText("Ship City").Width("180").Add();
}).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).Aggregates(agg =>
{
    agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Format = "C2", Type = "Sum", FooterTemplate = "Sum: ${Sum}" } }).Add();
}).Render()
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Supported features by vertical row rendering

The following features are only supported in vertical row rendering:

  • Paging
  • Sorting
  • Filtering
  • Selection
  • Dialog Editing
  • Aggregate
  • Infinite scroll
  • Toolbar