- Built-in toolbar items
- Custom toolbar items
- Built-in and custom items in toolbar
- Enable/disable toolbar items
Contact Support
ToolBar
21 Dec 202211 minutes to read
The TreeGrid provides ToolBar support to handle treegrid actions. The Toolbar
property accepts either the collection of built-in toolbar items and ItemModel
objects for custom toolbar items or HTML element ID for toolbar template.
To use ToolBar, inject Toolbar
module in the treegrid.
Built-in toolbar items
Built-in toolbar items execute standard actions of the treegrid, and it can be added by defining the Toolbar
as a collection of built-in items. It renders the button with icon and text.
The following table shows built-in toolbar items and its actions.
Built-in Toolbar Items | Actions |
---|---|
ExpandAll | Expands all the rows. |
CollapseAll | Collapses all the rows. |
Add | Adds a new record. |
Edit | Edits the selected record. |
Update | Updates the edited record. |
Delete | Deletes the selected record. |
Cancel | Cancels the edit state. |
Search | Searches the records by the given key. |
Prints the treegrid. | |
ExcelExport | Exports the treegrid to Excel. |
PdfExport | Exports the treegrid to PDF. |
WordExport | Exports the treegrid to Word. |
<ejs-treegrid id="TreeGrid" dataSource="ViewBag.datasource" height="265" toolbar="@(new List<string>() {"Print","Search"})" 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>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}
NOTE
- The
Toolbar
has options to define both built-in and custom toolbar items.
Custom toolbar items
Custom toolbar items can be added by defining the Toolbar
as a collection of ItemModels
.
Actions for this customized toolbar items are defined in the ToolbarClick
event.
By default, Custom toolbar items are in position Left
. You can change the position by using the Align
property. In the below sample, we have applied position Right
for the Quick Filter
toolbar item.
@{
List<object> toolbarItems = new List<object>();
toolbarItems.Add(new { text = "Quick Filter", tooltipText = "Quick Filter", id = "toolbarfilter", align = "Right" });
}
<ejs-treegrid id="TreeGrid" dataSource="ViewBag.datasource" height="400" allowFiltering="true" toolbar=toolbarItems toolbarClick="toolbarClick" 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>
function toolbarClick(args) {
if (args.item.id === 'toolbarfilter') {
var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
treegrid.filterByColumn("TaskName", "startswith", "Testing");;
}
}
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}
NOTE
- The
Toolbar
has options to define both built-in and custom toolbar items.
* If a toolbar item does not match the built-in items, it will be treated as a custom toolbar item.
Built-in and custom items in toolbar
TreeGrid have an option to use both built-in and custom toolbar items at same time.
In the below example, ExpandAll
, CollapseAll
are built-in toolbar items and Click
is custom toolbar item.
@{
List<object> toolbarItems = new List<object>();
toolbarItems.Add("ExpandAll");
toolbarItems.Add("CollapseAll");
toolbarItems.Add(new { text = "Click", tooltipText = "Click", id = "Click", prefixIcon = "e-time" });
}
<ejs-treegrid id="TreeGrid" dataSource="ViewBag.datasource" height="270" toolbar=toolbarItems toolbarClick="toolbarClick" childMapping="Children" treeColumnIndex="1">
<e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true"></e-treegrid-editsettings>
<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>
function toolbarClick(args) {
if (args.item.text === 'Click') {
alert("Custom toolbar click...");
}
}
</script>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-treegrid .e-time::before {
content: '\e20c'
}
Enable/disable toolbar items
You can enable/disable toolbar items by using the enableItems
method.
@{
List<object> toolbarItems = new List<object>();
toolbarItems.Add("QuickFilter");
toolbarItems.Add("ClearFilter");
}
<ejs-button id="enable" content="Enable"></ejs-button>
<ejs-button id="disable" content="Disable"></ejs-button>
<ejs-treegrid id="TreeGrid" dataSource="ViewBag.datasource" height="200" allowFiltering="true" toolbar=toolbarItems toolbarClick="toolbarClick" 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>
function toolbarClick(args) {
if (args.item.text === 'QuickFilter') {
var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
treegrid.filterByColumn("TaskName", "startswith", "Testing");
}
if (args.item.text === 'ClearFilter') {
var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
treegrid.clearFiltering();
}
}
document.getElementById('enable').onclick = () => {
var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
treegrid.toolbarModule.enableItems([treegrid.element.id + '_gridcontrol_QuickFilter', treegrid.element.id + '_gridcontrol_ClearFilter'], true);// enable toolbar items.
};
document.getElementById('disable').onclick = () => {
var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
treegrid.toolbarModule.enableItems([treegrid.element.id + '_gridcontrol_QuickFilter', treegrid.element.id + '_gridcontrol_ClearFilter'], false);// disable toolbar items.
};
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}