Search results

Toolbar in ASP.NET MVC Tree Grid control

22 Oct 2021 / 3 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.

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.
Print Prints the treegrid.
ExcelExport Exports the treegrid to Excel.
PdfExport Exports the treegrid to PDF.
WordExport Exports the treegrid to Word.
razor
default-toolbar.cs
Copied to clipboard
@(Html.EJS().TreeGrid("TreeGrid")
      .DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
        col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("TaskName").HeaderText("Task Name").Width(130).Add();
        col.Field("StartDate").HeaderText("Start Date").Format("yMd").Type("date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
        col.Field("Duration").HeaderText("Duration").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

       }).Height(265).Toolbar(new List<string>() { "Print", "Search" }).ChildMapping("Children").TreeColumnIndex(1).Render())
Copied to clipboard
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

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.

razor
custom-toolbar.cs
Copied to clipboard
@{
    List<object> toolbarItems = new List<object>();
    toolbarItems.Add(new { text = "Quick Filter", tooltipText = "Quick Filter", id = "toolbarfilter", align = "Right" });
}

@(Html.EJS().TreeGrid("ToolbarTemplate").AllowFiltering().DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
  col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
  col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
  col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
  col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

}).Height(400).Toolbar(toolbarItems).ToolbarClick("onToolbarClick").ChildMapping("Children").TreeColumnIndex(1).Render())

<script>
    function onToolbarClick(args) {
        if (args.item.id === 'toolbarfilter') {
            var treegrid = document.getElementById("ToolbarTemplate").ej2_instances[0];
            treegrid.filterByColumn("TaskName", "startswith", "Testing");;
        }
    }
</script>
Copied to clipboard
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

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.

razor
builtincustomitems.cs
builtincustomitems.css
Copied to clipboard
@{
    List<object> toolbarItems = new List<object>();
    toolbarItems.Add("ExpandAll");
    toolbarItems.Add("CollapseAll");
    toolbarItems.Add(new { text = "Click", tooltipText = "Click", id = "Click", prefixIcon = "e-time" });
}

@(Html.EJS().TreeGrid("ToolbarTemplate").DataSource((IEnumerable<object>)ViewBag.datasource)
      .EditSettings(edit =>
       {
         edit.AllowAdding(true);
         edit.AllowDeleting(true);
         edit.AllowEditing(true);
       })
       .Columns(col =>
        {
          col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
          col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
          col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Type("date").Width(90).Add();
          col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

        }).Height(270).Toolbar(toolbarItems).ToolbarClick("onToolbarClick").ChildMapping("Children").TreeColumnIndex(1)
          .Render())

<script>
    function onToolbarClick(args) {
        if (args.item.text === 'Click') {
            alert("Custom toolbar click...");
        }
    }
</script>
Copied to clipboard
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}
Copied to clipboard
#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.

razor
toolbar-enable.cs
Copied to clipboard
@{
    List<object> toolbarItems = new List<object>();
    toolbarItems.Add("QuickFilter");
    toolbarItems.Add("ClearFilter");
}

@Html.EJS().Button("enable").Content("Enable").Render()

@Html.EJS().Button("disable").Content("Disable").Render()

@(Html.EJS().TreeGrid("ToolbarTemplate").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Type("date").Width(90).Add();
         col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

       }).Height(200).Toolbar(toolbarItems).ToolbarClick("onToolbarClick").AllowFiltering()
         .ChildMapping("Children").TreeColumnIndex(1).Render())

<script>
    document.getElementById("enable").addEventListener('click', () => {
        var treegrid = document.getElementById("ToolbarTemplate").ej2_instances[0];
        treegrid.toolbarModule.enableItems([treegrid.element.id + '_gridcontrol_QuickFilter', treegrid.element.id + '_gridcontrol_ClearFilter'], true);// enable toolbar items.
    });
    document.getElementById("disable").addEventListener('click', () => {
        var treegrid = document.getElementById("ToolbarTemplate").ej2_instances[0];
        treegrid.toolbarModule.enableItems([treegrid.element.id + '_gridcontrol_QuickFilter', treegrid.element.id + '_gridcontrol_ClearFilter'], false);// disable toolbar items.
    });
    function onToolbarClick(args) {
        if (args.item.text === 'QuickFilter') {
            var treegrid = document.getElementById("ToolbarTemplate").ej2_instances[0];
            treegrid.filterByColumn("TaskName", "startswith", "Testing");
        }
        if (args.item.text === 'ClearFilter') {
            var treegrid = document.getElementById("ToolbarTemplate").ej2_instances[0];
            treegrid.clearFiltering();
        }
    }
</script>
Copied to clipboard
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

You can refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to knows how to present and manipulate data.