The column definitions are used as the dataSource schema in the TreeGrid. This plays a vital role in rendering column values in the required format.
The treegrid operations such as sorting, filtering and searching etc. are performed based on column definitions. The field
property of e-treegrid-columns
tag helper
is necessary to map the data source values in TreeGrid columns.
treeColumnIndex
property denotes the column that is used to expand and collapse child rows.
You can customize the header element by using the headerTemplate
property.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="Children" height="315">
<e-treegrid-columns>
<e-treegrid-column field="TaskName" headerText="Task Name" headerTemplate="#projectName" width="220"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText="Start Date" textAlign="Right" headerTemplate="#dateTemplate"
format="yMd"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" headerTemplate="#durationTemplate"></e-treegrid-column>
<e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" headerTemplate="#progressTemplate"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script type="text/x-template" id="projectName">
<div>
<div>
<img src="images/__Task name.png" width="20" height="20" class="e-image" /> Task Name
</div>
</div>
</script>
<script type="text/x-template" id="dateTemplate">
<div>
<div>
<img src="images/__Start name.png" width="20" height="20" class="e-image" /> Start Date
</div>
</div>
</script>
<script type="text/x-template" id="durationTemplate">
<div>
<div>
<img src="images/__Duration.png" width="20" height="20" class="e-image" /> Duration
</div>
</div>
</script>
<script type="text/x-template" id="progressTemplate">
<div>
<div>
<img src="images/__progress.png" width="20" height="20" class="e-image" /> Progress
</div>
</div>
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
return View();
}
By default, column header title is displayed from column field
value. To override the default header title, you have to define the headerText
value.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" 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" 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.data = tree;
return View();
}
If both the
field
andheaderText
are not defined in the column, the column renders with empty header text.
To format cell values based on specific culture, use the format
property of e-treegrid-column
tag helper. The TreeGrid uses Internalization
library to format the number values.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="Children" height="315" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="OrderName" headerText="Order Name" width="180"></e-treegrid-column>
<e-treegrid-column field="Price" headerText="Price" textAlign="Right" width="90" format="c2" type="number"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
var tree = TreeData.GetFormatData();
ViewBag.data = tree;
return View();
}
By default, the number and date values are formatted in en-US locale.
The number or integer values can be formatted using the below format strings.
Format | Description |
---|---|
N | Denotes numeric type. |
C | Denotes currency type. |
P | Denotes percentage type |
Please refer to the link to know more about Number formatting
.
You can format date values either using built-in date format string or custom format string.
For built-in date format you can specify format
property as string (Example: yMd
). Please refer to the link to know more about Date formatting
.
You can also use custom format string to format the date values. Some of the custom formats and the formatted date values are given in the below table.
Format | Formatted value |
---|---|
{ type:‘date’, format:‘dd/MM/yyyy’ } | 04/07/1996 |
{ type:‘date’, format:‘dd.MM.yyyy’ } | 04.07.1996 |
{ type:‘date’, skeleton:‘short’ } | 7/4/96 |
{ type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ } | 04/07/1996 12:00 AM |
{ type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ } | 07/04/1996 12:00:00 AM |
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" load="onLoad" childMapping="subTasks" height="315" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="orderID" headerText="Order ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="orderName" headerText="Order Name" width="220"></e-treegrid-column>
<e-treegrid-column field="orderDate" headerText="Order Date" textAlign="Right" width="160" ></e-treegrid-column>
<e-treegrid-column field="price" headerText="Price" textAlign="Right" width="90" format="C2" type="number"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
function onLoad() {
var treegridObj = document.getElementById("TreeGrid").ej2_instances[0];
for (i = 0; i < treegridObj.columns.length; i++) {
if (treegridObj.columns[i].field == "orderDate") {
treegridObj.columns[i].format = { type: 'dateTime', format: 'dd/MM/yyyy' };
}
}
}
</script>
public IActionResult Index()
{
var tree = TreeData.GetFormatData();
ViewBag.data = tree;
return View();
}
The autoFitColumns method resizes the column to fit the widest cell’s content without wrapping. You can autofit a specific column at initial rendering by invoking the autoFitColumns method in dataBound
event.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" allowResizing="true" dataBound="ondataBound" 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="60"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" width="120"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="120"></e-treegrid-column>
<e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
function ondataBound() {
var treegridObj = document.getElementById("TreeGrid").ej2_instances[0];
treegridObj.autoFitColumns(["TaskName"]);
}
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}
You can autofit all the columns by invoking the autoFitColumns method without column names.
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.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" allowReordering="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" width="90"></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();
}
You can disable reordering a particular column by setting the
allowReordering
property ofe-treegrid-column
tag helper to false.
Multiple columns can be reordered at a time by using the reorderColumns method.
<button id="reorderMultipleCols">Reorder</button>
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" allowReordering="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-column field="Progress" headerText="Progress" textAlign="Right" width="80"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
document.getElementById('reorderMultipleCols').addEventListener('click', () => {
var treegridObj = document.getElementById('TreeGrid').ej2_instances[0];
treegridObj.reorderColumns(['TaskId', 'Duration'], 'Progress');
});
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}
You can lock columns by using column.lockColumn
property. The locked columns will be moved to the first position. Also you can’t reorder its position.
In the below example, Duration column is locked and its reordering functionality is disabled.
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>
You can disable resizing for a particular column by setting the
allowResizing
property ofe-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.
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();
}
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();
}
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.
The column template
has options to display custom element instead of a field value in the column.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.dataSource" rowDataBound="rowDataBound" height="359" childMapping="Children" treeColumnIndex="0" rowHeight="83" width="auto">
<e-treegrid-columns>
<e-treegrid-column field="EmpID" headerText="Employee ID" width="95"></e-treegrid-column>
<e-treegrid-column field="Name" headerText="Name" width="120"></e-treegrid-column>
<e-treegrid-column field="DOB" headerText=" DOB" textAlign="Right" format="yMd" type="date" width="90"></e-treegrid-column>
<e-treegrid-column headerText="Year GR" textAlign="Center" width="120" template="#columnTemplate"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script type="text/x-template" id="columnTemplate">
<div id="spkwl${EmployeeID}"></div>
</script>
<script>
var lineData = [
[0, 6, 4, 1, 3, 2, 5],
[5, 4, 6, 3, 1, 2, 0],
[6, 4, 0, 3, 2, 5, 1],
[4, 6, 3, 0, 1, 2, 5],
[3, 5, 6, 4, 0, 1, 2],
[1, 3, 4, 2, 5, 0, 6],
[2, 4, 0, 3, 5, 6, 1],
[5, 4, 6, 3, 1, 2, 0],
[0, 6, 4, 1, 3, 2, 5],
[6, 4, 0, 3, 2, 5, 1],
[4, 6, 3, 0, 1, 2, 5],
[3, 5, 6, 4, 0, 1, 2],
[1, 3, 4, 2, 5, 0, 6],
[2, 4, 0, 3, 5, 6, 1],
[5, 4, 6, 3, 1, 2, 0],
[0, 6, 4, 1, 3, 2, 5],
[6, 4, 0, 3, 2, 5, 1],
[4, 6, 3, 0, 1, 2, 5],
[2, 4, 0, 3, 5, 6, 1],
[3, 5, 6, 4, 0, 1, 2],
[1, 3, 4, 2, 5, 0, 6]
];
var columnData = [
[0, 6, -4, 1, -3, 2, 5],
[5, -4, 6, 3, -1, 2, 0],
[6, 4, 0, 3, -2, 5, 1],
[4, -6, 3, 0, 1, -2, 5],
[3, 5, -6, -4, 0, 1, 2],
[1, -3, 4, -2, 5, 0, 6],
[2, 4, 0, -3, 5, -6, 1],
[5, 4, -6, 3, 1, -2, 0],
[0, -6, 4, 1, -3, 2, 5],
[6, 4, 0, -3, 2, -5, 1],
[4, 6, -3, 0, 1, 2, 5],
[3, -5, -6, 4, 0, 1, 2],
[1, 3, -4, -2, 5, 0, 6],
[2, -4, 0, -3, 5, 6, 1],
[5, 4, -6, 3, 1, -2, 0],
[0, 6, 4, -1, -3, 2, 5],
[6, -4, 0, -3, 2, 5, 1],
[4, 6, -3, 0, -1, 2, 5],
[6, 4, 0, -3, 2, -5, 1],
[3, 5, 6, -4, 0, 1, 2],
[1, 3, -4, 2, -5, 0, 6]
];
function rowDataBound(args) {
let winloss = new ej.charts.Sparkline({
height: '50px',
width: '150px',
type: 'WinLoss',
valueType: 'Numeric',
fill: '#3C78EF',
tiePointColor: 'darkgray',
negativePointColor: '#f7a816',
dataSource: columnData[args.data.EmployeeID]
});
winloss.appendTo(args.row.querySelector('#spkwl' + args.data.EmployeeID));
}
</script>
public IActionResult Index()
{
var tree = TreeData.GetTemplateData();
ViewBag.dataSource = tree;
return View();
}
TreeGrid actions such as editing, filtering and sorting etc. will depend upon the column
field
. If thefield
is not specified in the template column, the treegrid actions cannot be performed.
You can render the template elements based on condition.
In the following code, checkbox is rendered based on Approved field value.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="Children" height="315" 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 headerText="Approved" template="#template" textAlign="Right" 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 id="template" type="text/x-template">
<div class="template_checkbox">
${if(Approved)}
<input type="checkbox" checked>
${else}
<input type="checkbox"> ${/if}
</div>
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
return View();
}
Column type can be specified using the type
property of e-treegrid-column
tag helper. It specifies the type of data the column binds.
If the format
is defined for a column, the column uses type
to select the appropriate format option (number
or date).
TreeGrid column supports the following types:
If the
type
is not defined, it will be determined from the first record of thedataSource
.
The column chooser has options to show or hide columns dynamically. It can be enabled by defining the
showColumnChooser
as true.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" showColumnChooser="true" toolbar="@(new List<string>() { "ColumnChooser"} childMapping="Children" treeColumnIndex="1" allowPaging="true">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" showInColumnChooser="true" width="190"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
<e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="110"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
return View();
}
You can hide the column names in column chooser by defining the
showInColumnChooser
property ofe-treegrid-column
tag helper as false.
The Column chooser can be displayed on a page through external button by invoking the openColumnChooser method with X and Y axis positions.
<ejs-button id="show" content="OPEN COLUMN CHOOSER"></ejs-button>
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" showColumnChooser="true" childMapping="Children" treeColumnIndex="1" allowPaging="true">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" showInColumnChooser="true" width="190"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
<e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="110"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
document.getElementById('show').addEventListener("click", function(){
var treegrid = document.getElementById('TreeGrid').ej2_instances[0];
treegrid.columnChooserModule.openColumnChooser(200, 50); // give X and Y axis
});
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
return View();
}
The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the showColumnMenu
property as true.
The default items are displayed in following table.
Item | Description |
---|---|
SortAscending |
Sort the current column in ascending order. |
SortDescending |
Sort the current column in descending order. |
AutoFit |
Auto fit the current column. |
AutoFitAll |
Auto fit all columns. |
Filter |
Show the filter option as given in FilterSettings.Type |
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" showColumnMenu="true" childMapping="Children" treeColumnIndex="1" allowFiltering="true" allowResizing="true" allowSorting="true" allowPaging="true">
<e-treegrid-filtersettings type="Menu"></e-treegrid-filtersettings>
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
<e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="110"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
return View();
}
You can disable column menu for a particular column by defining the
showColumnMenu
property ofe-treegrid-column
tag helper as false.
To render checkboxes in existing column, you need to set [showCheckbox
] property of e-treegrid-column
as true.
It is also possible to select the rows hierarchically using checkboxes in TreeGrid by enabling [autoCheckHierarchy
] property. When we check on any parent record checkbox then the child record checkboxes will get checked.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="400" autoCheckHierarchy="true" childMapping="Children" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" showCheckbox="true" width="190"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}
You can toggle column visibility based on media queries which are defined
at the hideAtMedia
.
The hideAtMedia
accepts valid
Media Queries.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="Children" treeColumnIndex="1" allowPaging="true">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" hideAtMedia="(min-width: 700px)" 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" hideAtMedia="(min-width: 500px)" 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.data = tree;
return View();
}
You can enable or disable treegrid action for a particular column by setting the allowFiltering
, and allowSorting
properties of e-treegrid-column
tag helper.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" allowFiltering="true" allowSorting="true" childMapping="Children" treeColumnIndex="1" allowPaging="true">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" allowSorting="false" 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" allowFiltering="false" 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.data = tree;
return View();
}
You can show or hide treegrid columns dynamically using external buttons by invoking the showColumns or hideColumns method.
<ejs-button id="hide" content="Hide Columns"></ejs-button>
<ejs-button id="show" content="showColumns"></ejs-button>
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" allowFiltering="true" allowSorting="true" childMapping="Children" treeColumnIndex="1" allowPaging="true">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" allowSorting="false" 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" allowFiltering="false" 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>
<script>
document.getElementById('show').onclick = () => {
var treeGridObj = document.getElementById("TreeGrid").ej2_instances[0];
treeGridObj.showColumns(['Task ID', 'Duration']); //show by HeaderText
};
document.getElementById('hide').onclick = () => {
var treeGridObj = document.getElementById("TreeGrid").ej2_instances[0];
treeGridObj.hideColumns(['Task ID', 'Duration']); //hide by HeaderText
};
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
return View();
}
You can achieve complex data binding in the treegrid by using the dot(.) operator in the field
.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" 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" width="180"></e-treegrid-column>
<e-treegrid-column field="Assignee.FirstName" headerText="First Name" 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.data = tree;
return View();
}
The valueAccessor
is used to access/manipulate the value of display data. You can achieve custom value formatting by using the valueAccessor
.
@{
Object orderFormatter = "orderFormatter";
Object currencyFormatter = "currencyFormatter";
}
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="subTasks" height="315" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="orderID" headerText="Order ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="orderName" headerText="Order Name" width="180" valueAccessor="orderFormatter"></e-treegrid-column>
<e-treegrid-column field="orderDate" headerText="Order Date" format="yMd" textAlign="Right" width="160" ></e-treegrid-column>
<e-treegrid-column field="price" headerText="Price" textAlign="Right" width="90" valueAccessor="currencyFormatter"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
function currencyFormatter(field, data, column) {
return '€' + data['price'];
}
function orderFormatter(field, data, column) {
return data[field] + '-' + data['category'];
}
</script>
public IActionResult Index()
{
var tree = TreeData.GetFormatData();
ViewBag.data = tree;
return View();
}
You can bind an array of objects in a column by using the valueAccessor
property.
In this example, the name field has an array of two objects, FirstName and LastName. These two objects are joined and bound to a column using the
valueAccessor
.
@{
Object valueAccessfn = "orderFormatter";
}
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" 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="Name" headerText="Assignee" valueAccessor="valueAccessfn" 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>
function orderFormatter(field, data, column) {
return data[field].map(function(args) {
return args.FirstName || args.LastName }).join(' ');
}
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
return View();
}
You can achieve the expression column by using the valueAccessor
property.
@{
Object totalPrice = "totalPrice";
}
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="subTasks" height="315" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="orderID" headerText="Order ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="orderName" headerText="Order Name" width="180"></e-treegrid-column>
<e-treegrid-column field="units" headerText="Units" textAlign="Right" width="120"></e-treegrid-column>
<e-treegrid-column field="unitPrice" headerText="Unit Price" textAlign="Right" width="120"></e-treegrid-column>
<e-treegrid-column field="price" headerText="Total Price" textAlign="Right" width="90" valueAccessor="totalPrice"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
function totalPrice(field, data, column) {
return data.units * data.unitPrice;
};
</script>
public IActionResult Index()
{
var tree = TreeData.GetFormatData();
ViewBag.data = tree;
return View();
}
To render boolean values as checkbox in columns, you need to set displayAsCheckBox
property as true.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" height="315" 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="Approved" headerText="Approved" displayAsCheckBox="true" textAlign="Center" width="180"></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.data = tree;
return View();
}