ToolBar in ASP.NET CORE Grid Component

27 Sep 20224 minutes to read

The Grid provides ToolBar support to handle grid 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.

Enable or disable toolbar items

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

<ejs-button id="disable" content="Disable"></ejs-button>
<ejs-button id="enable" content="Enable"></ejs-button>
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" toolbarClick="toolbarClick" toolbar="@( new List<string>(){"Expand","Collapse"})" height="270" allowGrouping="true">
    <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>
    <e-grid-groupSettings columns="@(new string[] { "CustomerID"})"></e-grid-groupSettings>
</ejs-grid>

<script>
    document.getElementById("enable").addEventListener('click', () => {
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.toolbarModule.enableItems(['Grid_Collapse', 'Grid_Expand'], true);// enable toolbar items.
    });

    document.getElementById("disable").addEventListener('click', () => {
        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.toolbarModule.enableItems(['Grid_Collapse', 'Grid_Expand'], false);// disable toolbar items.
    });

    function toolbarClick(args) {
        if (args.item.id === 'Grid_Collapse') { // grid_Collapse is component id + '_' + toolbar item name.
            this.groupModule.collapseAll();
        }
        if (args.item.id === 'Grid_Expand') {
            this.groupModule.expandAll();
        }
    }
</script>
public IActionResult Index()
 {
   var orders = orderDetails.GetAllRecords();
   ViewBag.datasource = orders;            
   return View();
 }

Add toolbar at the bottom of Grid

You can add the Grid toolbar component at the bottom of Grid using the created event.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() {"Print","Search"})" created="created" height="270">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" type="number" 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="C" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" format='yMd' width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function created() {
        let toolbar = this.element.querySelector('.e-toolbar');
        this.element.appendChild(toolbar);
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}