ToolBar in ASP.NET MVC Grid Component

27 Sep 20223 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.

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

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

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).ToolbarClick("toolbarClick").Columns(col =>
{
   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
   col.Field("Freight").HeaderText("Freight").Width("120").EditType("numericedit").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Add();

}).AllowPaging().PageSettings(page => page.PageCount(2)).AllowGrouping().GroupSettings(group => group.Columns(new string[] { "CustomerID" })).Toolbar(new List<string>() { "Expand", "Collapse" }).Render()

<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.

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
    col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
    col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C").Width("120").Add();
    col.Field("OrderDate").HeaderText("Order Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Width("140").Add();

}).Created("created").Toolbar(new List<string>() { "Print", "Search" }).Render()

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