Search results

Toolbar

The Grid provides tool bar support to handle grid actions. The Toolbar property accepts either the collection of built-in tool bar items and ItemModel

Built-in Tool Bar Item

The Grid provides tool bar support to handle grid actions. The Toolbar as a collection of built-in items. It renders the button with icon and text.

The following table shows built-in tool bar 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.
@using Syncfusion.EJ2.Blazor.Grids

<EjsGrid DataSource="@Orders" AllowPaging="true" Height="200" Toolbar="@(new List<string>() { "Search","Print"})">
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    public List<Order>Orders{ get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

The following screenshots represent a grid with Built-in toolbar, Built in Toolbar

Custom Toolbar Items

Custom tool bar items can be added by defining the Toolbar. Custom toolbar items can be achieved by using Expand all and Collapse all functions.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor.Navigations

@{
    List<ItemModel> Toolbaritems = new List<ItemModel>();
    Toolbaritems.Add(new ItemModel() { Text = "Expand all", TooltipText="Expand all", PrefixIcon = "e-expand"});
    Toolbaritems.Add(new ItemModel() { Text = "Collapse all", TooltipText="Collapse all", PrefixIcon = "e-collapse", Align=(Syncfusion.EJ2.Blazor.Navigations.ItemAlign.Right)});
}

 <EjsGrid DataSource="@Orders" @ref="Grid" AllowGrouping="true" AllowPaging="true" Height="200" Toolbar="Toolbaritems">
     <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents>
     <GridGroupSettings Columns="@(new string[] { "OrderID" })"></GridGroupSettings>

     <GridColumns>
         <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
         <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
         <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
         <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
     </GridColumns>
 </EjsGrid>

 <style>
     .e-expand::before {
         content: '\e82e';
     }
     .e-collapse::before {
         content: '\e834';
     }
 </style>

 @code{
     EjsGrid<Order> Grid;
     public List<Order>Orders{ get; set; }
     protected override void OnInitialized()
     {
         Orders = Enumerable.Range(1, 75).Select(x => new Order()
         {
             OrderID = 1000 + x,
             CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
             Freight = 2.1 * x,
             OrderDate = DateTime.Now.AddDays(-x),
         }).ToList();
     }

     public class Order
     {
         public int? OrderID { get; set; }
         public string CustomerID { get; set; }
         public DateTime? OrderDate { get; set; }
         public double? Freight { get; set; }
     }

     public void ToolbarClickHandler(Syncfusion.EJ2.Blazor.Navigations.ClickEventArgs args)
     {
         if (args.Item.Text == "Expand all")
         {
             this.Grid.GroupExpandAll();
         }
         if (args.Item.Text == "Collapse all")
         {
             this.Grid.GroupCollapseAll();
         }
     }
 }

The following screenshots represent a grid with Custom toolbar items, Custom toolbat items

Built-in and Custom Items in Toolbar

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

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

@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Navigations

@{
    List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", "Delete", "Update", "Cancel", new ItemModel() { Text = "Click", TooltipText = "Click", PrefixIcon = "e-click", Id = "Click" }};
}

<EjsGrid DataSource="@Orders" AllowPaging="true" Height="200" Toolbar="Toolbaritems">
    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents>
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" IsPrimaryKey="true" ValidationRules="@(new { required=true, number=true})" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new { required=true})" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" ValidationRules="@(new { required=true})" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>
<style>
    .e-click::before {
        content: '\e525';
    }
</style>

@code{

    public List<Order>Orders{ get; set; }
    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }

    public void ToolbarClickHandler(Syncfusion.EJ2.Blazor.Navigations.ClickEventArgs args)
    {

        if (args.Item.Id == "Click")
        {
            //You can customized your code here....
        }
    }
}

The following screenshots represent a grid with Built-in and custom items in toolbar, Built in and custom items in Toolbar

Custom Toolbar

Custom tool bar items can be added by defining the Toolbar Template .Custom toolbar can be placed inside grid using [ToolbarTemplate] as below.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor.Navigations

<EjsGrid ModelType="@Model" DataSource="@Orders" AllowPaging="true" Height="200" @ref="Grid" AllowGrouping="true">
    <GridTemplates>
        <ToolbarTemplate>
            <EjsToolbar>
                <ToolbarEvents Clicked="ToolbarClickHandler"></ToolbarEvents>
                <ToolbarItems>
                    <ToolbarItem Type="@ItemType.Button" prefixIcon="e-collapse" id="collapseall" TooltipText="Collapse"></ToolbarItem>
                </ToolbarItems>
            </EjsToolbar>
        </ToolbarTemplate>
    </GridTemplates>

    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents>
    <GridGroupSettings Columns="@(new string[] { "OrderID" })"></GridGroupSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order D ate" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

<style>
    .e-collapse::before {
        content: '\e834';
    }
</style>

@code{
    EjsGrid<Order> Grid;

    public List<Order>Orders{ get; set; }

    Order Model = new Order();

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }

    public void ToolbarClickHandler(Syncfusion.EJ2.Blazor.Navigations.ClickEventArgs args)
    {
        this.Grid.GroupCollapseAll();
    }
}

The following screenshots represent a grid with Custom toolbar, Custom Toolbar

The custom toolbar can be placed inside grid using Toolbar template component. The contents in the Grid can be collapsed by clicking the Collapse icon button.

Custom Toolbar with dropdown list

Drop down list can be added by using dropdownlist in the tool bar section.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor.Navigations
@using Syncfusion.EJ2.Blazor.DropDowns


<EjsGrid ModelType="@Model" DataSource="@Orders" AllowPaging="true" Height="200" @ref="Grid">
    <GridEvents TValue="Order"></GridEvents>
    <EjsToolbar>
        <ToolbarItems>
            <ToolbarItem Type="ItemType.Input">
                <Template>
                    <EjsDropDownList TValue="@int" DataSource="LocalData" Width="200">
                        <DropDownListEvents TValue="int" ValueChange="OnChange"></DropDownListEvents>
                        </EjsDropDownList>
                </Template>
            </ToolbarItem>
        </ToolbarItems>
    </EjsToolbar>

    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{

    EjsGrid<Order> Grid;
    public List<Order> Orders { get; set; }
    Order Model = new Order();

    List<int> LocalData = new List<int>() { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 };
    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 10).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }
    public void OnChange(Syncfusion.EJ2.Blazor.DropDowns.ChangeEventArgs<int> args)
    {
        this.Grid.SelectRow(args.Value);
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

The following screenshots represent a grid with Custom toolbar dropdown list, Custom Toolbar with dropdown list

Enable/Disable Toolbar Items

You can enable / disable tool bar items by using the EnableToolbarItems method.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor.Navigations
@using Syncfusion.EJ2.Blazor.Buttons

<div>
    <div style="float:left;">
        <EjsButton id="Enable" Content="Enable" @onclick="enable"></EjsButton>
    </div>
    <div style="padding-left: 90px">
        <EjsButton id="Disable" Content="Disable" @onclick="disable"></EjsButton>
    </div>
</div>

<EjsGrid id="Grid" DataSource="@Orders" AllowPaging="true" Height="200" @ref="Grid" AllowGrouping="true" Toolbar="@(new List<string>() { "Expand", "Collapse" })">

   <GridGroupSettings Columns="@(new string[] { "OrderID" })"></GridGroupSettings>
   <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents>
   <GridColumns>
       <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
       <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
       <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
       <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
   </GridColumns>
</EjsGrid>

<style>
    .e-expand::before {
        content: '\e82e';
    }

    .e-collapse::before {
        content: '\e834';
    }
</style>

@code{

    EjsGrid<Order> Grid;
    public List<Order>Orders{ get; set; }
    public void enable()
    {
        this.Grid.EnableToolbarItems(new List<string>() { "Grid_Expand", "Grid_Collapse" }, true);
    }

    public void disable()
    {
        this.Grid.EnableToolbarItems(new List<string>() { "Grid_Expand", "Grid_Collapse" }, false);
    }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }


    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }

    public void ToolbarClickHandler(Syncfusion.EJ2.Blazor.Navigations.ClickEventArgs args)
    {
        if (args.Item.Text == "Expand")
        {
            this.Grid.GroupExpandAll();
        }
        if (args.Item.Text == "Collapse")
        {
            this.Grid.GroupCollapseAll();
        }
    }
}

The following screenshots represent a grid with Enable/disable toolbar items, Enable/disable Toolbar items