Our Blazor Button Group displays a set of buttons. You can arrange buttons vertically/horizontally, enable selection, apply predefined styles to all buttons or or to a button individually.
Button Group APIs include the following key members:
- Items — Specifies a collection of button group items.
- Orientation — Specifies how items are arranged (horizontally or vertically).
- SelectionMode — Specifies selection mode.
None,Single, andMultipleoptions are available. - CssClass — Specifies the name of the component's CSS class.
- RenderStyle / RenderStyleMode — Apply the desired render style to all button group items.
- Text — Specifies item text.
- IconCssClass — Specifies the name of an item's icon CSS class.
The Button Group component also supports different size modes. To specify component size in code, use the SizeMode property.
|
|
|
|
|
|
|
|---|---|---|---|---|---|
| Chai | Beverages | $18.00 | 39 | 10 boxes x 20 bags | |
| Chang | Beverages | $19.00 | 17 | 24 - 12 oz bottles | |
| Aniseed Syrup | Condiments | $10.00 | 13 | 12 - 550 ml bottles | |
| Chef Anton's Cajun Seasoning | Condiments | $22.00 | 53 | 48 - 6 oz jars | |
| Chef Anton's Gumbo Mix | Condiments | $21.00 | 0 | 36 boxes | |
| Grandma's Boysenberry Spread | Condiments | $25.00 | 120 | 12 - 8 oz jars | |
| Uncle Bob's Organic Dried Pears | Produce | $30.00 | 15 | 12 - 1 lb pkgs. | |
| Northwoods Cranberry Sauce | Condiments | $40.00 | 6 | 12 - 12 oz jars | |
| Mishi Kobe Niku | Meat/Poultry | $97.00 | 29 | 18 - 500 g pkgs. | |
| Ikura | Seafood | $31.00 | 31 | 12 - 200 ml jars | |
| Queso Cabrales | Dairy Products | $21.00 | 22 | 1 kg pkg. | |
| Queso Manchego La Pastora | Dairy Products | $38.00 | 86 | 10 - 500 g pkgs. | |
| Konbu | Seafood | $6.00 | 24 | 2 kg box | |
| Tofu | Produce | $23.00 | 35 | 40 - 100 g pkgs. | |
| Genen Shouyu | Condiments | $16.00 | 39 | 24 - 250 ml bottles | |
| Pavlova | Confections | $17.00 | 29 | 32 - 500 g boxes | |
| Alice Mutton | Meat/Poultry | $39.00 | 0 | 20 - 1 kg tins | |
| Carnarvon Tigers | Seafood | $63.00 | 42 | 16 kg pkg. | |
| Teatime Chocolate Biscuits | Confections | $9.00 | 25 | 10 boxes x 12 pieces | |
| Sir Rodney's Marmalade | Confections | $81.00 | 40 | 30 gift boxes | |
Data grid with 77 rows and 6 columns
0 rows are selected
This demo illustrates how to integrate a Button Group into the DevExpress Blazor Grid component (to filter grid data). The Blazor Button Group component imitates a Grid toolbar and uses Miltiple selection mode. When you click a button group item, the Grid applies corresponding filters to its data.
To replicate this demo and attach a Button Group to our Blazor Grid, you must:
- Add a ToolbarTemplate to the Grid component's markup.
- In the template, add a DxButtonGroup component and set its selection mode to
Multiple. - Create button group items based on Grid Category column values.
- In buttom group item's Click event handler, call the Grid's SetFieldFilterCriteria method to filter grid data based on selected categories.