DxButtonGroupItem Class
Defines a button group item in DxButtonGroup.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
Declaration
public class DxButtonGroupItem :
DxButtonBase,
IDisposableRemarks
The DxButtonGroupItem class implements the functionality of an individual item displayed in a DxButtonGroup component. Use the Items property to manage the component’s item collection.
<DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary">
<Items>
<DxButtonGroupItem Text="Add Task" />
<DxButtonGroupItem Text="Edit Task" />
<DxButtonGroupItem Text="Assign Task" />
<DxButtonGroupItem Text="Complete Task" />
<DxButtonGroupItem Text="Archive Task" />
</Items>
</DxButtonGroup>
Item Appearance
Use the following API members to customize the drop-down button item’s appearance:
- Text
- Specifies the item text.
- Tooltip
- Specifies the item’s tooltip text.
- CssClass
- Assigns a CSS class to the item.
- IconCssClass | IconPosition
- Customize the item’s icon.
<DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary">
<Items>
<DxButtonGroupItem Text="Add Task"
IconCssClass="icon icon-plus" />
<DxButtonGroupItem Text="Edit Task"
IconCssClass="icon icon-edit" />
<DxButtonGroupItem Text="Assign Task"
IconCssClass="icon icon-user-profile" />
<DxButtonGroupItem Text="Complete Task"
IconCssClass="icon icon-check" />
<DxButtonGroupItem Text="Archive Task"
IconCssClass="icon icon-delete" />
</Items>
</DxButtonGroup>
Predefined Styles
The <DxButtonGroup> component allows you to apply predefined styles to all button group items or to an individual item. You can use the following properties:
- DxButtonGroup.RenderStyle | DxButtonGroupItem.RenderStyle
- Specify a button’s predefined style.
- DxButtonGroup.RenderStyleMode | DxButtonGroupItem.RenderStyleMode
- Specify a button’s color filling type.
Note
Individual item settings have priority over component settings.
<DxButtonGroup RenderStyleMode="ButtonRenderStyleMode.Outline" SizeMode="SizeMode.Large">
<Items>
<DxButtonGroupItem Text="Primary" />
<DxButtonGroupItem Text="Secondary" RenderStyle="ButtonRenderStyle.Secondary" />
<DxButtonGroupItem Text="Info" RenderStyle="ButtonRenderStyle.Info" />
<DxButtonGroupItem Text="Link" RenderStyle="ButtonRenderStyle.Link" />
<DxButtonGroupItem Text="Success" RenderStyle="ButtonRenderStyle.Success" />
<DxButtonGroupItem Text="Warning" RenderStyle="ButtonRenderStyle.Warning" />
<DxButtonGroupItem Text="Danger" RenderStyle="ButtonRenderStyle.Danger" />
</Items>
</DxButtonGroup>
Items with Hyperlinks
Use the NavigateUrl property to specify a URL to which the web browser navigates when the button group item is clicked. To specify where the browser should open the URL (same tab or new tab), use the Target property.
The following code snippet opens the Blazor Documentation item’s NavigateUrl link in the same tab and the Blazor Demos item’s link in a new tab:
<DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary">
<Items>
<DxButtonGroupItem Text="Blazor Documentation"
NavigateUrl="https://docs.devexpress.com/Blazor/400725/blazor-components"
Target="_blank"/>
<DxButtonGroupItem Text="Blazor Demos"
NavigateUrl="https://demos.devexpress.com/blazor/"
Target="_blank" />
</Items>
</DxButtonGroup>
Item Selection
The <DxButtonGroup> component supports item selection. Use the DxButtonGroup.SelectionMode property to specify the selection mode. The default mode is None – users cannot select button group items.
Set the DxButtonGroup.SelectionMode property to Single or Multiple to enable single or multiple item selection. To select specific items in code, set their DxButtonGroupItem.Selected properties to true. To respond to property changes, handle corresponding DxButtonGroupItem.SelectedChanged events.
The following code snippet sets the component’s selection mode to Single and displays the current selection state of the Admin button group item:
<p>Is item selected - @IsItemSelected</p>
<DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary"
RenderStyleMode="ButtonRenderStyleMode.Outline"
SelectionMode="ButtonGroupSelectionMode.Single">
<Items>
<DxButtonGroupItem Text="Admin"
Selected="@IsItemSelected"
SelectedChanged="@OnSelectedChanged"/>
<DxButtonGroupItem Text="Editor" />
<DxButtonGroupItem Text="Guest" />
</Items>
</DxButtonGroup>
@code {
bool IsItemSelected = false;
void OnSelectedChanged(bool isSelected) {
IsItemSelected = isSelected;
}
}
Handle Item Clicks
Handle the item’s Click event to react to item clicks. You can also use the DxButtonGroup.ItemClick event to specify a common click handler for all items.
<p>The clicked item is @ClickedItem</p>
<DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary"
ItemClick="@OnItemClick" >
<Items>
<DxButtonGroupItem Text="Add Task"
IconCssClass="icon icon-plus"
Click="@OnAddItemClick" />
<DxButtonGroupItem Text="Edit Task"
IconCssClass="icon icon-edit"
Click="@OnEditItemClick" />
<DxButtonGroupItem Text="Assign Task"
IconCssClass="icon icon-user-profile" />
<DxButtonGroupItem Text="Complete Task"
IconCssClass="icon icon-check" />
<DxButtonGroupItem Text="Archive Task"
IconCssClass="icon icon-delete" />
</Items>
</DxButtonGroup>
@code{
public string ClickedItem { get; set; } = "";
void OnAddItemClick(MouseEventArgs args) {
ClickedItem = "Add Task";
}
void OnEditItemClick(MouseEventArgs args) {
ClickedItem = "Edit Task";
}
async Task OnItemClick(ButtonGroupItemClickEventArgs args) {
await JSRuntime.InvokeVoidAsync("alert", $"The button group item has been clicked.");
}
}
You can also use the button group item to submit a form. To enable form submit, set the SubmitFormOnClick property to true.