Column Resizing in ASP.NET MVC Tree Grid Component
21 Dec 20226 minutes to read
Column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To enable column resize, set the AllowResizing
property to true.
@using Syncfusion.EJ2.Grids
@(Html.EJS().TreeGrid("Resize").AllowResizing()
.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()
)
public ActionResult Resize()
{
var treeData = TreeGridItems.GetTreeData();
ViewBag.datasource = treeData;
return View();
}
NOTE
You can disable resizing for a particular column by setting the
AllowResizing
property ofColumn
to false.
In RTL mode, you can click and drag the left edge of the header cell to resize the column.
Min and max width
Column resize can be restricted between minimum and maximum width by defining the MinWidth
and MaxWidth
in Column
API.
In the following sample, minimum and maximum width are defined for Duration, and Task Name columns.
@using Syncfusion.EJ2.Grids
@(Html.EJS().TreeGrid("Minmax").AllowResizing()
.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).MinWidth(170).MaxWidth(250).Add();
col.Field("Duration").HeaderText("Duration").Width(80).MinWidth(50).MaxWidth(150).TextAlign(TextAlign.Right).Add();
col.Field("Progress").HeaderText("Progress").Width(80).TextAlign(TextAlign.Right).Add();
}).Height(315).ChildMapping("Children").TreeColumnIndex(1).Render()
)
public ActionResult Minmax()
{
var treeData = TreeGridItems.GetTreeData();
ViewBag.datasource = treeData;
return View();
}
Resize stacked column
Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. You can disable resize for particular stacked column by setting AllowResizing
as false to its columns.
@(Html.EJS().TreeGrid("StackedResize").AllowResizing().DataSource((IEnumerable<object>)ViewBag.datasource)
.Columns(col =>
{
col.HeaderText("Order Details").Columns(
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "ID", Width = "90",
HeaderText = "Order ID",
TextAlign =Syncfusion.EJ2.Grids.TextAlign.Right
},
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Name", Width = "170",
HeaderText = "Order Name"
},
}).Add();
col.HeaderText("Shipment Details").Columns(
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "ShipmentCategory", Width = "90",
HeaderText = "Category"
},
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "ShippedDate", Width = "90",
HeaderText = "Shipped Date", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right,
Format = "yMd"
}
}).Add();
}).Height(260).ChildMapping("Children").TreeColumnIndex(1).Render()
)
public ActionResult StackedResize()
{
var treeData = ShipmentData.GetShipmentData();
ViewBag.datasource = treeData;
return View();
}
Touch interaction
When the right edge of the header cell is tapped, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as needed.
The following screenshot represents the column resizing in touch device.
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.