Blazor Grid — Toolbar (v23.2)

As you may already know, the DevExpress Blazor Grid UI component ships with a new toolbar section designed to display custom content within it. In this blog post, I'll describe how to use this section to display a toolbar component populated with CRUD-related items.

Location & Appearance

The toolbar section is located above the group panel at the top edge of our Blazor Grid component. Area style and size settings match settings applied to other Grid elements. As such, the Grid's SizeMode property value affects all DevExpress Blazor components placed within this section.

Since the toolbar area is designed to display a toolbar element, we made certain the section looks especially good when using our Blazor Toolbar. The following image illustrates the appearance of the Toolbar when Blazor Dark theme and small size mode are enabled:

Attach Toolbar to the Grid

To attach a toolbar to the Grid component, add the ToolbarTemplate to the Grid component's markup. In the template, declare the DxToolbar component and populate it with items based on business requirements.

Toolbar items can display an icon, text, or both. DevExpress Blazor UI components ship with a set of predefined icons available in our Figma UI Kit. You can use these or any other icons in your toolbar elements. Refer to the following help topic for additional information: Icons.

The code snippet below populates the toolbar with CRUD-related buttons and a button that displays the column chooser:

<DxGrid Data="Data" @ref="MyGrid" FocusedRowEnabled="true" >
    <ToolbarTemplate>
        <DxToolbar>
            <DxToolbarItem Text="New"
                           Click="OnCreateNew"
                           IconCssClass="grid-new-row" />
            <DxToolbarItem Text="Edit"
                           Click="OnEdit"
                           IconCssClass="grid-edit-row" />
            <DxToolbarItem Text="Delete"
                           Click="OnDelete"
                           IconCssClass="grid-delete-row" />
            <DxToolbarItem BeginGroup="true"
                           Text="Column Chooser"
                           Click="OnShowColumnChooser"
                           CssClass="column-chooser-button"
                           IconCssClass="grid-column-chooser"
                           RenderStyle="ButtonRenderStyle.Secondary" />
        </DxToolbar>
    </ToolbarTemplate>
    // ...
</DxGrid>
@code {
    IGrid MyGrid { get; set; }
    IEnumerable<object> Data { get; set; }
    // ...
    async Task OnCreateNew(ToolbarItemClickEventArgs e) {
        await MyGrid.StartEditNewRowAsync();
    }
    async Task OnEdit(ToolbarItemClickEventArgs e) {
        if (MyGrid.GetFocusedDataItem() != null)
            await MyGrid.StartEditDataItemAsync(MyGrid.GetFocusedDataItem());
    }
    void OnDelete(ToolbarItemClickEventArgs e) {
        if (MyGrid.GetFocusedDataItem() != null)
            MyGrid.ShowDataItemDeleteConfirmation(MyGrid.GetFocusedDataItem());
    }
    void OnShowColumnChooser() {
        MyGrid.ShowColumnChooser(".column-chooser-button");
    }
}

Use the following link to learn more and download our Grid toolbar sample: GitHub Example.

Place Search Box within Toolbar

A built-in search box is located within the Grid’s group panel. When grouping is disabled, you may wish to hide the group panel and display the search box inside the toolbar section. To achieve this, implement your custom search box using the SearchText property and place your search box inside the toolbar template:

<DxGrid @ref="MyGrid" SearchText="@SearchText" Data="Data" >
    <ToolbarTemplate>
        <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
            <DxToolbarItem BeginGroup="true" 
                           Context="toolbarItemContext"
                           Alignment="ToolbarItemAlignment.Right" >
                <Template>
                    <DxTextBox @bind-Text="SearchText" NullText="Search..."
                        ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
                </Template>
            </DxToolbarItem>
        </DxToolbar>
    </ToolbarTemplate>
</DxGrid>
@code {
    string SearchText { get; set; }
    IGrid MyGrid { get; set; }
    IEnumerable<object> Data { get; set; }
    // ...
}

Your Feedback Matters

As always, we welcome your feedback. Please take a moment to answer the following survey questions: