Get Started with Blazor Ribbon

• Aug 12, 2026
• 6 minutes to read

This tutorial adds a DevExpress Ribbon component to a Blazor page, defines the Ribbon structure, and connects Ribbon commands to application logic.

View Example: Blazor Ribbon – Modify Blazor Grid Settings and Execute Commands

Create an Application

Create an application as described in the following help topic: Get Started With DevExpress Components for Blazor.

Enable Interactivity on a Page

The Ribbon component responds to data updates and supports user interaction when you enable interactive render mode. In static render mode, the Ribbon can display only static data.

@rendermode InteractiveServer

Add a Grid

Add a Grid component and bind it to data. In this tutorial, DxGrid simply serves only as a command target.

<DxGrid @ref="grid"
        Data="@products"
        KeyFieldName="@nameof(Product.ProductID)">
    <Columns>
        @* ... *@
    </Columns>
    <TotalSummary>
        @* ... *@
    </TotalSummary>
</DxGrid>

@code {
    DxGrid grid { get; set; }
    List<Product> products = new();
    List<Category> categories = new();
}

Add a Ribbon

Add DxRibbon markup:

@rendermode InteractiveServer

<DxRibbon>
</DxRibbon>

Add an Application Tab for Global Commands

1. Add items to DxRibbonApplicationTab to display global commands in the application menu.

   <DxRibbon>
       <DxRibbonApplicationTab Text="Export">
           <DxRibbonApplicationTabItem Text="CSV" Click="Grid_ExportToCsv" />
           <DxRibbonApplicationTabItem Text="PDF" Click="Grid_ExportToPdf" />
           <DxRibbonApplicationTabItem Text="XLSX" Click="Grid_ExportToXlsx" />
       </DxRibbonApplicationTab>
   </DxRibbon>
   

2. Add command handlers to the page’s @code block.

   @code {
       const string ExportFileName = "ExportResult";
       // ...
       async Task Grid_ExportToXlsx() {
           await grid.ExportToXlsxAsync(ExportFileName);
       }
       async Task Grid_ExportToCsv() {
           await grid.ExportToCsvAsync(ExportFileName);
       }
       async Task Grid_ExportToPdf() {
           await grid.ExportToPdfAsync(ExportFileName);
       }
   }
   

Define Icons

In this tutorial, icons are specified only for the application tab and its items. Refer to the following help topic for more information on ribbon item icons: Define Ribbon Item Icons.

1. Reference the DevExpress.Images.Blazor package and add a using directive to the Razor page.

   @* ... *@
   @using DevExpress.Images.Blazor
   
   <DxRibbon>
       @* ... *@
   </DxRibbon>
   

2. Assign the icon name to the IconUrl property.

   <DxRibbon>
       <DxRibbonApplicationTab Text="Export" IconUrl="@Icon.Share">
           <DxRibbonApplicationTabItem Text="CSV" Click="Grid_ExportToCsv" IconUrl="@Icon.Table"/>
           <DxRibbonApplicationTabItem Text="PDF" Click="Grid_ExportToPdf" IconUrl="@Icon.Document"/>
           <DxRibbonApplicationTabItem Text="XLSX" Click="Grid_ExportToXlsx" IconUrl="@Icon.Table"/>
       </DxRibbonApplicationTab>
   </DxRibbon>
   

Add Ribbon Tabs and Groups

Add DxRibbonTab and DxRibbonGroup elements to define Ribbon tabs and groups:

<DxRibbon>
    @* ... *@
    <DxRibbonTab Text="Home">
        <DxRibbonGroup Text="Grid Customization">
        </DxRibbonGroup>
    </DxRibbonTab>
    <DxRibbonTab Text="Data">
        <DxRibbonGroup Text="Data">
        </DxRibbonGroup>
    </DxRibbonTab>
</DxRibbon>

Add Ribbon Items

DxRibbonItem is a command item that acts as a button or a drop-down menu.

Button Items

1. Add DxRibbonItem objects to the Home and Data tabs.

   Razor

   <DxRibbon>
       @* ... *@
       <DxRibbonTab Text="Home">
           <DxRibbonGroup Text="Grid Customization">
               <DxRibbonItem Text="Show Column Chooser"
                             Click="Grid_ShowColumnChooser" />
           </DxRibbonGroup>
       </DxRibbonTab>
       <DxRibbonTab Text="Data">
           <DxRibbonGroup Text="Data">
               <DxRibbonItem Text="New Row" Click="Grid_NewRow" />
               <DxRibbonItem Text="Delete Row" Click="Grid_DeleteRow" />
           </DxRibbonGroup>
       </DxRibbonTab>
   </DxRibbon>
   

2. Add command handlers that call DxGrid methods.

   @code {
       void Grid_ShowColumnChooser() {
           grid.ShowColumnChooser();
       }
       // ...
       async Task Grid_NewRow() {
           await grid.StartEditNewRowAsync();
       }
       void Grid_DeleteRow() {
           grid.ShowRowDeleteConfirmation(FocusedRowVisibleIndex);
       }
   }
   

   

Toggle Button

DxRibbonToggleItem is a two-state item with a persistent selected state. In this tutorial, toggle items are used to control DxGrid settings.

1. Add DxRibbonToggleItems to the Home group.

   Razor

   <DxRibbon>
       @* ... *@
       <DxRibbonTab Text="Home">
           <DxRibbonGroup Text="Grid Customization">
               @* ... *@
               <DxRibbonToggleItem Text="Search Box"
                                   Click="Grid_ToggleSearch" />
               <DxRibbonToggleItem Text="Filter Panel"
                                   Click="Grid_ToggleFilterRow" />
               <DxRibbonToggleItem Text="Group Panel"
                                   Click="Grid_ToggleGroupPanel" />
               <DxRibbonToggleItem Text="Group Data"
                                   Click="Grid_ToggleGrouping" />
           </DxRibbonGroup>
       </DxRibbonTab>
   </DxRibbon>
   

2. Add state properties and the following ribbon command handlers that customize DxGrid settings:

   • Grid_ToggleSearch
   • Grid_ToggleFilterRow
   • Grid_ToggleGroupPanel
   • Grid_ToggleGrouping

   @code {
       bool ShowSearchBox { get; set; } = false;
       bool ShowFilterRow { get; set; } = false;
       bool ShowGroupPanel { get; set; } = false;
       byte categoryGroupIndex { get; set; } = 0;
       // ...
       async Task Grid_ToggleSearch() {
           ShowSearchBox = !ShowSearchBox;
           await Task.CompletedTask;
       }
       async Task Grid_ToggleFilterRow() {
           ShowFilterRow = !ShowFilterRow;
           await Task.CompletedTask;
       }
       async Task Grid_ToggleGroupPanel() {
           ShowGroupPanel = !ShowGroupPanel;
           await Task.CompletedTask;
       }
       async Task Grid_ToggleGrouping() {
           grid.BeginUpdate();
           if (categoryGroupIndex == 0) {
               grid.GroupBy("CategoryID", 1);
               categoryGroupIndex = 1;
           }
           else {
               grid.GroupBy("CategoryID", -1);
               categoryGroupIndex = 0;
           }
           grid.EndUpdate();
           await Task.CompletedTask;
       }
   }
   

3. Bind state properties and commands to DxGrid component:

   <DxGrid Data="@products"
           @ref="grid"
           ShowSearchBox="@ShowSearchBox"
           ShowFilterRow="@ShowFilterRow"
           ShowGroupPanel="@ShowGroupPanel">
           @* ... *@
   </DxGrid>
   

Split Button with Toggle Buttons in the Dropdown Menu

1. Add a DxRibbonItem with nested items to create a menu. In this tutorial, the menu contains toggle items.

   Razor

   <DxRibbon>
       @* ... *@
       <DxRibbonTab Text="Home">
           <DxRibbonGroup Text="Grid Customization">
               @* ... *@
               <DxRibbonItem Text="Total Summary" SplitDropDownButton="true"
                             Click="Grid_ToggleSummaries" IsPrimary="true">
                   <DxRibbonToggleItem Text="Product Name" Checked="@ProductNameSummary"
                                       Click="Grid_ToggleProductNameSummary" />
                   <DxRibbonToggleItem Text="Unit Price" Checked="@UnitPriceSummary"
                                       Click="Grid_ToggleUnitPriceSummary" />
                   <DxRibbonToggleItem Text="Units in Stock" Checked="@UnitsInStockSummary"
                                       Click="Grid_ToggleUnitsInStockSummary" />
               </DxRibbonItem>
           </DxRibbonGroup>
       </DxRibbonTab>
       @* ... *@
   </DxRibbon>
   

   The SplitDropDownButton property is set to true. In this case, the Ribbon item is split into two areas: the main action button handles the click event, and the drop-down button opens a drop-down menu.

2. Add properties and command handlers that customize DxGrid:

   @code {
       bool ProductNameSummary { get; set; } = false;
       bool UnitPriceSummary { get; set; } = false;
       bool UnitsInStockSummary { get; set; } = false;
       // ...
       async Task Grid_ToggleSummaries() {
           bool allOff = !ProductNameSummary && !UnitPriceSummary && !UnitsInStockSummary;
   
           ProductNameSummary = allOff;
           UnitPriceSummary = allOff;
           UnitsInStockSummary = allOff;
   
           StateHasChanged();
           await Task.CompletedTask;
       }
       // The same approach applies to control visibility of other total summaries.
       async Task Grid_ToggleProductNameSummary() {
           ProductNameSummary = !ProductNameSummary;
           await Task.CompletedTask;
       }
   }
   

3. Bind properties and commands to the DxGrid component:

   <DxGrid Data="@products"
           @ref="grid">
           @* ... *@
       <TotalSummary>
           <DxGridSummaryItem ... Visible="@ProductNameSummary" />
           <DxGridSummaryItem ... Visible="@UnitPriceSummary" />
           <DxGridSummaryItem ... Visible="@UnitsInStockSummary" />
       </TotalSummary>
   </DxGrid>
   

Spin Edit and ComboBox Items

1. Add a DxRibbonSpinEditItem and DxRibbonComboBoxItem to the ribbon.

   <DxRibbon>
       @* ... *@
       <DxRibbonTab Text="Home">
           <DxRibbonGroup Text="Grid Customization">
               @* ... *@
               <DxRibbonSpinEditItem Value="@ItemsOnPage" MinValue="5" MaxValue="32"
                                     Increment="1" Width="100px" Text="Items on Page"
                                     ValueChanged="@((int newValue) => ItemsOnPageChanged(newValue))" />
           </DxRibbonGroup>
       </DxRibbonTab>
       <DxRibbonTab Text="Data">
           <DxRibbonGroup Text="Data">
               @* ... *@
               <DxRibbonComboBoxItem Data="EditModeItems" @bind-Value="CurrentEditMode"
                                     TextFieldName="@nameof(EditModeItem.Text)"
                                     ValueFieldName="@nameof(EditModeItem.Value)" />
           </DxRibbonGroup>
       </DxRibbonTab>
   </DxRibbon>
   

2. Add properties and command handlers to the page’s @code block to update DxGrid settings:

   @code {
       public static readonly GridEditMode[] EditModes = new GridEditMode[] {
           GridEditMode.EditCell,
           GridEditMode.EditForm,
           GridEditMode.PopupEditForm,
           GridEditMode.EditRow
       };
       public class EditModeItem {
           public string Text { get; set; }
           public GridEditMode Value { get; set; }
       }
   
       List<EditModeItem> EditModeItems { get; set; } =
           EditModes.Select(m => new EditModeItem { Text = $"Edit Mode: {m}", Value = m }).ToList();
   
       GridEditMode CurrentEditMode { get; set; } = EditModes[0];
       int ItemsOnPage { get; set; } = 10;
       // ...
       void ItemsOnPageChanged(int newValue) {
           ItemsOnPage = newValue;
           grid.BeginUpdate();
           grid.PageSize = ItemsOnPage;
           grid.EndUpdate();
       }
   }
   

3. Bind the CurrentEditMode and ItemsOnPage state properties to the DxGrid component:

   <DxGrid @ref="grid"
           PageSize="@ItemsOnPage"
           EditMode="@CurrentEditMode">
           @* ... *@
   </DxGrid>