Tool Bar in ASP.NET CORE Tree Grid Component

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 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.
Print	Prints the treegrid.
ExcelExport	Exports the treegrid to Excel.
PdfExport	Exports the treegrid to PDF.
WordExport	Exports the treegrid to Word.

CSHTML
Default-toolbar.cs
<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 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.

CSHTML
Custom-toolbar.cs
@{
   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.

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.

CSHTML
Builtincustomitems.css
@{
    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'
}

You can enable/disable toolbar items by using the enableItems method.

CSHTML
Toolbar-enable.cs
@{
    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();
}

ToolBar

Built-in toolbar items

Custom toolbar items

Built-in and custom items in toolbar

Enable/disable toolbar items