Reorder in ASP.NET MVC Tree Grid Component
21 Dec 20222 minutes to read
Reordering can be done by drag and drop of a particular column header from one index to another index within the treegrid. To enable reordering, set the AllowReordering
to true.
@using Syncfusion.EJ2.Grids
@(Html.EJS().TreeGrid("Reorder").AllowReordering()
.DataSource((IEnumerable<object>)ViewBag.datasource)
.Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").Width(80).TextAlign(TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").Width(200).Add();
col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(TextAlign.Right).Add();
col.Field("Progress").HeaderText("Progress").Width(80).TextAlign(TextAlign.Right).Add();
}).Height(315).ChildMapping("Children").TreeColumnIndex(1).Render()
)
public ActionResult Reorder()
{
var treeData = TreeGridItems.GetTreeData();
ViewBag.datasource = treeData;
return View();
}
NOTE
You can disable reordering a particular column by setting the
AllowReordering
ofColumn
to false.
Reorder multiple columns
Multiple columns can be reordered at a time by using the reorderColumns
method.
@using Syncfusion.EJ2.Grids
@Html.EJS().Button("reorderMultipleCols").Content("Reorder Multiple Columns").Render()
@(Html.EJS().TreeGrid("Reorder").AllowReordering()
.DataSource((IEnumerable<object>)ViewBag.datasource)
.Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
col.Field("Duration").HeaderText("Duration").Width(90).TextAlign(TextAlign.Right).Add();
col.Field("Progress").HeaderText("Progress").Width(80).TextAlign(TextAlign.Right).Add();
}).Height(315).ChildMapping("Children").TreeColumnIndex(1).Render()
)
<script>
document.getElementById("reorderMultipleCols").addEventListener('click', () => {
var treegrid = document.getElementById("Reorder").ej2_instances[0];
treegrid.reorderColumns(['TaskId', 'Duration'], 'Progress');
});
</script>
public ActionResult reorderMultipleCols()
{
var treeData = TreeGridItems.GetTreeData();
ViewBag.datasource = treeData;
return View();
}
NOTE
You can refer to our
ASP.NET MVC Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore ourASP.NET MVC Tree Grid example
to knows how to present and manipulate data.