Column Resizing in ASP.NET CORE Tree Grid Component

21 Dec 20225 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.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" allowResizing="true" 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"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" width="90"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

You can disable resizing for a particular column by setting the allowResizing property of e-treegrid-column tag helper 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 properties of e-treegrid-column tag helper.

In the following sample, minimum and maximum width are defined for Duration, and Task Name columns.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" allowResizing="true" childMapping="Children" treeColumnIndex="1" allowPaging="true">
    <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" minWidth="170" maxWidth="250" width="180" ></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80" minWidth="50" maxWidth="150"></e-treegrid-column>
        <e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="80"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    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.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" allowPaging="true" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-pagesettings pageSize="6"></e-treegrid-pagesettings>
    <e-treegrid-columns>
        <e-treegrid-column headerText="Order Details" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "ID", Width = "110", HeaderText = "Order ID", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right  },
               new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Name", Width = "220", HeaderText = "Order Name",  TextAlign= Syncfusion.EJ2.Grids.TextAlign.Left },
               new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "OrderDate", Width = "120", HeaderText = "Order Date",  TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right, Format="yMd" }} )">
        </e-treegrid-column>
        <e-treegrid-column headerText="Shipment Details" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "ShipmentCategory", Width = "170", HeaderText = "Shipment Category" },
               new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "ShippedDate", Width = "140", Format="yMd", HeaderText = "Shipment Date",  TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right },
               new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Units", Width = "90", HeaderText = "Units",  }} )">
        </e-treegrid-column>
        <e-treegrid-column headerText="Price Details" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "UnitPrice", Width = "180", HeaderText = "Price per unit", Format = "c2", Type="number", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right },
               new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Price", HeaderText = "Total Price", Width="160", Format="c", Type="number", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right }} )">
        </e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetStackedData();
    ViewBag.data = tree;
    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.

Touch Interaction

NOTE

You can 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 knows how to present and manipulate data.