Adaptive View in ASP.NET MVC Tree Grid Component

21 Dec 20221 minute to read

The Tree 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.

Render adaptive dialogs

When you enable the enableAdaptiveUI property, the tree grid will render the filter, sort, and edit dialogs in full screen for a better user experience. The following demo demonstrates this behavior.

@Html.EJS().TreeGrid("adaptivebrowser").DataSource((IEnumerable<object>)ViewBag.datasource).TreeColumnIndex(1).Height("100%").EnableAdaptiveUI(true).AllowPaging(true).AllowFiltering(true).ChildMapping("Children").AllowSorting(true).Columns(col =>
{
    col.Field("TaskId").HeaderText("Task ID").Width(135).IsPrimaryKey(true).TextAlign(TextAlign.Right).Add();
    col.Field("TaskName").HeaderText("Task Name").Width(280).Add();
    col.Field("Duration").HeaderText("Duration").Width(140).TextAlign(TextAlign.Right).Add();
    col.Field("Progress").HeaderText("Progress").Width(145).TextAlign(TextAlign.Right).Add();
    }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.TreeGrid.FilterType.Excel); }).EditSettings(edit =>
    {
        edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.TreeGrid.EditMode.Dialog);
    }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).Load("load").Render()
public IActionResult Adaptive()
{
    var order = TreeData.GetDefaultData();
    ViewBag.dataSource = order;
    return View();
}

NOTE

Refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to learn how to present and manipulate data.