Indent and Outdent in ASP.NET CORE Tree Grid Component

21 Dec 20223 minutes to read

The Indent and Outdent feature will help to change the hierarchy level of rows in tree grid. The indent action moves the selected row as the last child of its previous row, whereas the outdent action moves the selected row as a sibling to its parent row.

To use the indent and outdent feature, inject the RowDD module in the Tree Grid. The tree grid toolbar has the built-in items to execute indent and outdent actions. Define this by using the toolbar property.

CSHTML

<ejs-treegrid id="TreeGrid" dataSource="ViewBag.datasource" selectedRowIndex="2" height="265" toolbar="@(new List<string>() {"Indent", "Outdent"})" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-columns>
         <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
         <e-treegrid-column field="TaskName" headerText="Task Name" width="180" textAlign="Left"></e-treegrid-column>
         <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="90"></e-treegrid-column>
         <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

Indent.cs

public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Indent/Outdent a row programmatically

You can change the hierarchy level of record programmatically using indent and outdent methods.

CSHTML

<ejs-button id="Indent" content="Indent"></ejs-button>
<ejs-button id="Outdent" content="Outdent"></ejs-button>
<ejs-treegrid id="TreeGrid" dataSource="ViewBag.datasource" height="265" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-columns>
         <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
         <e-treegrid-column field="TaskName" headerText="Task Name" width="180" textAlign="Left"></e-treegrid-column>
         <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="90"></e-treegrid-column>
         <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

<script>
    document.getElementById('Indent').addEventListener('click', () => {
        var treegrid = document.getElementById('TreeGrid').ej2_instances[0];
        treegrid.indent(treegrid.getCurrentViewRecords()[2]);
    });
    document.getElementById('Outdent').addEventListener('click', () => {
        var treegrid = document.getElementById('TreeGrid').ej2_instances[0];
        treegrid.outdent(treegrid.getCurrentViewRecords()[2]);
    });
</script>

Indent.cs

public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    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.