Toolbar Items in Syncfusion ASP.NET CORE Grid Component

21 Dec 202211 minutes to read

Built-in toolbar items execute standard actions of the grid, 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
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 grid.
ExcelExport	Exports the grid to Excel.
PdfExport	Exports the grid to PDF.
WordExport	Exports the grid to Word.
ColumnChooser	Choose the column’s visibility.

CSHTML
Toolbar.cs
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" toolbar="@(new List<string>() {"Print","Search"})" height="270"> 
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
 {
    var orders = OrderDetails.GetAllRecords();
    ViewBag.datasource = orders;            
    return View();
 }

NOTE

The toolbar has options to define both built-in and custom toolbar items.

By default, the built-in toolbar items render as buttons with an icon and text. It is possible to hide the text and show only the icon using the following CSS style.

.e-toolbar .e-tbar-btn-text, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
    display: none;
}

This is demonstrated in the following sample:

CSHTML
Toolbar-icon.cs
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel"})" height="270">
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120" isPrimaryKey="true"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<style>
    .e-toolbar .e-tbar-btn-text, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
        display: none;
    }
</style>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

Custom toolbar items can be added by defining the toolbar as a collection of ItemModel.
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 Collapse All toolbar item.

CSHTML
Custom-toolbar-item.cs
@{

    List<object> toolbarItems = new List<object>();
    toolbarItems.Add(new { text = "Expand All", tooltipText = "Expand All", prefixIcon = "e-expand", id = "expandall" });
    toolbarItems.Add(new { text = "Collapse All", tooltipText = "Collapse All", prefixIcon = "e-collapse", id = "collapseall", align = "Right" });
}

<ejs-grid id="Grid" dataSource="@ViewBag.datasource" toolbarClick="toolbarClick" toolbar=toolbarItems height="270" allowGrouping="true">
    <e-grid-groupsettings columns="@(new string[] {"CustomerID"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {

        if (args.item.id === 'expandall') {
            this.groupModule.expandAll();
        }
        if (args.item.id === "collapseall") {
            this.groupModule.collapseAll();
        }

    }
</script>
public IActionResult Index()
 {
    var orders = orderDetails.GetAllRecords();
    ViewBag.datasource = orders;            
    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.

Grid have an option to use both built-in and custom toolbar items at same time.

In the below example, Add, Edit, Delete, Update, Cancel are built-in toolbar items and Click is custom toolbar item.

CSHTML
Builtin-custom-items.cs
@{
    List<object> toolbarItems = new List<object>();
    toolbarItems.Add("Add");
    toolbarItems.Add("Edit");
    toolbarItems.Add("Delete");
    toolbarItems.Add("Update");
    toolbarItems.Add("Cancel");
    toolbarItems.Add(new { text = "Click", tooltipText = "Click", prefixIcon = "e-expand", id = "Click" });
}

<div>
    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing="true" allowPaging="true" allowSorting="true" toolbarClick="toolbarClick" toolbar=toolbarItems>
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column>
            <e-grid-column field="EmployeeID" headerText="Employee ID" width="120"></e-grid-column>
            <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>
            <e-grid-column field="ShipCity" headerText="Ship City" editType="dropdownedit" edit="new {@params = new { dataSource= ViewBag.DropdownData} }" width="120"></e-grid-column>
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>

<script>
    function toolbarClick(args) {
        if (args.item.id === 'Click') {
            alert("Custom toolbar click...");
        }
    }
</script>

<style>
    .e-expand::before {
        content: '\e5b8';
    }
</style>
public IActionResult Index()
 {
   var orders = OrderDetails.GetAllRecords();
   ViewBag.DataSource = orders;            
   return View();
 }

By default, Custom toolbar items are in the Left position. You can change the position by using the align property. In the following sample, we have applied the Right position for the Collapse All toolbar item, Left for the Expand All toolbar item, and Center for the Search toolbar item.

CSHTML
Custom-toolbar-position.cs
@{
    List<object> toolbarItems = new List<object>();
    toolbarItems.Add(new { text = "Expand All", tooltipText = "Expand All", prefixIcon = "e-expand", id = "expandall", align = "Left" });
    toolbarItems.Add(new { text = "Collapse All", tooltipText = "Collapse All", prefixIcon = "e-collapse", id = "collapseall", align = "Right" });
    toolbarItems.Add(new { text = "Search", align = "Center" });
}

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbarClick="toolbarClick" toolbar=toolbarItems height="270" allowGrouping="true">
    <e-grid-groupsettings columns="@(new string[] {"FirstName"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID" isPrimaryKey="true" textAlign="Right" type="number" width="120"></e-grid-column>
        <e-grid-column field="FirstName" headerText="First Name" type="string" width="140"></e-grid-column>
        <e-grid-column field="Country" headerText="Country" textAlign="Right" type="string" width="120"></e-grid-column>
        <e-grid-column field="PostalCode" headerText="Postal Code" textAlign="Right" type="string" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function toolbarClick(args) {

        if (args.item.id === 'expandall') {
            this.groupModule.expandAll();
        }
        if (args.item.id === "collapseall") {
            this.groupModule.collapseAll();
        }

    }
</script>
<style>
    .e-btn-icon.e-expand.e-icons.e-icon-left::before {
        content: '\e82e';
    }

    .e-collapse::before {
        content: '\e834';
    }
</style>
public IActionResult Index()
{
    ViewBag.DataSource = EmployeeDetails.GetAllRecords();
    return View();
}

Toolbar Items in ASP.NET CORE Grid Component

Built-in toolbar items

Show only icons in built-in toolbar items

Custom toolbar items

Both built-in and custom items in toolbar

Custom toolbar component in a specific position