Blazor Grid Toolbar - Telerik UI for Blazor

New to Telerik UI for Blazor? Start a free 30-day trial

The Blazor Grid toolbar can render built-in and custom tools. This article describes the built-in tools and shows how to add custom tools or create a custom toolbar.

Built-In Tools

The Blazor Grid provides several built-in tools that can be added to the component toolbar. To include a specific tool in the toolbar configuration, use the respective tool tags below.

Command Tools

Tool Name	Tool Tag	Description
Add	`GridToolBarAddTool`	An add command that fires the `OnAdd` event.
Cancel	`GridToolBarCancelEditTool`	Cancels the changes for the selected row. Row selection and `Inline` or `Popup` editing mode are required.
CsvExport	`GridToolBarCsvExportTool`	An export command for CSV files that fires the `OnBeforeExport` event.
Delete	`GridToolBarDeleteTool`	Deletes the selected row. Row selection and `Inline` or `Popup` editing mode are required.
Edit	`GridToolBarEditTool`	Enters edit mode for the selected row. Row selection and `Inline` or `Popup` editing mode are required.
ExcelExport	`GridToolBarExcelExportTool`	An export command for Excel files that fires the `OnBeforeExport` event.
Filter	`GridToolBarFilterTool`	A toggle button in the Grid’s toolbar that opens a UI option for filtering. On desktop screens, it displays a popup with a filter menu; on mobile devices, it renders an `ActionSheet`. The filter component has two views: one for selecting the column to filter, and another for applying the filter to the selected column. The tool also exposes an `Icon` parameter that allows you to override the default icon.
Group	`GridToolBarGroupTool`	A toggle button in the Grid’s toolbar that opens a popup listing the groupable columns—click a column to group by it. On mobile devices, the popup is rendered as an `ActionSheet`. The tool also exposes an `Icon` parameter that allows you to override the default icon.
Save	`GridToolBarSaveEditTool`	Saves the changes for the selected row. Row selection and `Inline` or `Popup` editing mode are required.
Sort	`GridToolBarSortTool`	A toggle button in the Grid’s toolbar that opens a popup listing the sortable columns—click a column to sort by it. On mobile devices, the popup is rendered as an `ActionSheet`. The tool also exposes an `Icon` parameter that allows you to override the default icon.
SearchBox	`GridToolBarSearchBoxTool`	A searchbox that filters multiple Grid columns simultaneously.

Layout Tools

Tool Name	Tool Tag	Description
Spacer	`GridToolBarSpacerTool`	Consumes the available empty space and pushes the rest of the tools next to one another.

Custom Tools

In addition to the built-in tools, the Grid also supports custom tools. Use the <GridToolBarCustomTool> tag, which is a standard Blazor RenderFragment. See the example below.

Add a <GridToolBar> tag inside <TelerikGrid> to configure a toolbar, for example:

Arrange the Grid tools in a specific order;
Remove some of the built-in tools;
Add custom tools.

<GridToolBar> and <GridToolBarTemplate> cannot be used together in the same Grid instance.

Grid Toolbar Tools

<TelerikGrid Data=@GridData
             EditMode="@GridEditMode.Inline"
             FilterMode="GridFilterMode.FilterMenu"
             Groupable="true"
             Sortable="true"
             Pageable="true"
             SelectionMode="@GridSelectionMode.Multiple"
             @bind-SelectedItems="@SelectedPeople"
             AdaptiveMode="AdaptiveMode.Auto"
             OnUpdate=@UpdateItem
             OnCreate=@CreateItem
             OnDelete="@DeleteItem">
    <GridSettings>
        <GridToolBarSettings OverflowMode="GridToolBarOverflowMode.Scroll"
                             ScrollButtonsPosition="GridToolBarScrollButtonsPosition.Start"
                             ScrollButtonsVisibility="GridToolBarScrollButtonsVisibility.Visible"
                             ShowIconOnlyTools="true"
                             ShowInactiveTools="true">
        </GridToolBarSettings>
    </GridSettings>
    <GridToolBar>
        <GridToolBarCustomTool>
            <TelerikButton OnClick="@OnToolbarCustomClick">Custom Grid Tool</TelerikButton>
        </GridToolBarCustomTool>

        <GridToolBarAddTool>
            Add a product
        </GridToolBarAddTool>

        <GridToolBarCsvExportTool>
            Export to CSV
        </GridToolBarCsvExportTool>

        <GridToolBarExcelExportTool>
            Export to Excel
        </GridToolBarExcelExportTool>

        <GridToolBarFilterTool>
            Filter
        </GridToolBarFilterTool>

        <GridToolBarSortTool>
            Sort
        </GridToolBarSortTool>

        <GridToolBarGroupTool>
            Group
        </GridToolBarGroupTool>

        <GridToolBarEditTool>
            Edit
        </GridToolBarEditTool>

        <GridToolBarSaveEditTool>
            Save
        </GridToolBarSaveEditTool>

        <GridToolBarCancelEditTool>
            Cancel
        </GridToolBarCancelEditTool>

        <GridToolBarDeleteTool>
            Delete
        </GridToolBarDeleteTool>

        <GridToolBarSpacerTool />

        <GridToolBarSearchBoxTool />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(Person.EmployeeId) Editable="false" Visible="true" Width="200px" />
        <GridColumn Field=@nameof(Person.Name) Width="200px" />
        <GridColumn Field=@nameof(Person.AgeInYears) Title="Age" Visible="false" Width="240px" />
        <GridColumn Field=@nameof(Person.HireDate) Title="Hire Date" Width="230px" />
        <GridCommandColumn Width="200px">
            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil"></GridCommandButton>
            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true"></GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private List<Person> GridData { get; set; }
    private IEnumerable<Person> SelectedPeople { get; set; } = Enumerable.Empty<Person>();

    private void OnToolbarCustomClick()
    {
        Console.WriteLine("Custom Grid Toolbar tool clicked!");
    }

    protected override void OnInitialized()
    {
        var data = new List<Person>();
        var rand = new Random();

        for (int i = 0; i < 50; i++)
        {
            data.Add(new Person()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                HireDate = DateTime.Now.Date.AddDays(-(i * 2)),
                AgeInYears = 20
            });
        }
        GridData = new List<Person>(data);
    }

    private void CreateItem(GridCommandEventArgs args)
    {
        var argsItem = args.Item as Person;

        argsItem.EmployeeId = GridData.Count + 1;

        GridData.Insert(0, argsItem);
    }

    private void UpdateItem(GridCommandEventArgs args)
    {
        var argsItem = args.Item as Person;
        var itemForEdit = GridData.FirstOrDefault(i => i.EmployeeId == argsItem.EmployeeId);

        if (itemForEdit != null)
        {
            itemForEdit.AgeInYears = argsItem.AgeInYears;
            itemForEdit.HireDate = argsItem.HireDate;
            itemForEdit.Name = argsItem.Name;
        }
    }
    
    private void DeleteItem(GridCommandEventArgs args)
    {
        var argsItem = args.Item as Person;

        if (GridData.Contains(argsItem))
        {
            GridData.Remove(argsItem);
        }
    }

    public class Person
    {
        public int? EmployeeId { get; set; }

        public string Name { get; set; }

        public int? AgeInYears { get; set; }

        public DateTime HireDate { get; set; }
    }
}

Add a <GridToolBarTemplate> tag inside <TelerikGrid> to configure a custom toolbar. You can add your own HTML and components to create a more complex layout in the Grid header to match your business needs and also GridCommandButton instances (read more about the features available in those buttons in the Command Column article).

When using a <GridToolBarTemplate>, you need to use the Tab key to navigate between the focusable items. This is because the <GridToolBarTemplate> allows rendering of custom elements. On the other hand, the <GridToolBar> uses the built-in keyboard navigation through arrow keys.

Custom Grid Toolbar

@result

<TelerikGrid Data=@MyData Pageable="true" PageSize="15" EditMode="@GridEditMode.Inline" Height="500px" OnCreate="@CreateHandler">

    <GridToolBarTemplate>
        <div style="display: flex; width: 100%; justify-content: space-between;">
            <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>

            <div>
                <GridCommandButton Command="CsvExport" Icon="@SvgIcon.FileCsv">Export to CSV</GridCommandButton>
                <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
                <GridCommandButton Command="PdfExport" Icon="@SvgIcon.FilePdf">Export to Pdf</GridCommandButton>
                <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
            </div>

            <button @onclick="@( () => result = $"Custom button click on {DateTime.Now}" )">
                Click Me
            </button>
        </div>
    </GridToolBarTemplate>

    <GridExport>
        <GridCsvExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
        <GridPdfExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
        <GridColumn Field=@nameof(SampleData.HireDate) Title="Hire Date" />
        <GridCommandColumn>
            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private string result;

    private bool ExportAllPages { get; set; }

    private void CreateHandler(GridCommandEventArgs args)
    {
        SampleData newItem = args.Item as SampleData;
        MyData.Insert(0, newItem); // actual CRUD operations are not implemented, for brevity

        result = string.Format("On {2} you added the employee {0} who was hired on {1}.", newItem.Name, newItem.HireDate, DateTime.Now);
        StateHasChanged();
    }
   
    private List<SampleData> MyData = Enumerable.Range(1, 50).Select(
        x => new SampleData
            {
                ID = x,
                Name = "name " + x,
                HireDate = DateTime.Now.AddDays(-x)
            }).ToList();

    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }

}

Next Steps

Handle Grid events