Adaptive View in ASP.NET CORE 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.

<ejs-treegrid id="adaptivebrowser" dataSource="ViewBag.dataSource" enableAdaptiveUI="true" childMapping="Children" treeColumnIndex="1" height="100%" allowPaging="true" allowFiltering="true" allowSorting="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" })" load="onLoad">
    <e-treegrid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-treegrid-editSettings>
    <e-treegrid-filterSettings type="Excel"></e-treegrid-filterSettings>
    <e-treegrid-columns>
    <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="135"></e-treegrid-column>
    <e-treegrid-column field="TaskName" headerText="Task Name" width="280"></e-treegrid-column>
    <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="140"></e-treegrid-column>
    <e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="145"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Adaptive()
{
    var order = TreeData.GetDefaultData();
    ViewBag.dataSource = order;
    return View();
}

NOTE

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