DxButtonGroupItem Class

Defines a button group item in DxButtonGroup.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxButtonGroupItem :
    DxButtonBase,
    IDisposable

Remarks

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.

razor

<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>

Run Demo: Button Group

Item Appearance

Use the following API members to customize the drop-down button item’s appearance:

TextSpecifies the item text.TooltipSpecifies the item’s tooltip text.CssClassAssigns a CSS class to the item.IconCssClass | IconPositionCustomize the item’s icon.

Razor
CSS

razor

<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>

css

.icon {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    opacity: 0.7;
}
.icon-plus {
    mask-image: url(../images/plus.svg);
}

.icon-edit {
    mask-image: url(../images/edit.svg);
}

.icon-user-profile {
    mask-image: url(../images/user-profile.svg);
}

.icon-check {
    mask-image: url(../images/check.svg);
}

.icon-delete {
    mask-image: url(../images/delete.svg);
}

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.RenderStyleSpecify a button’s predefined style.DxButtonGroup.RenderStyleMode | DxButtonGroupItem.RenderStyleModeSpecify a button’s color filling type.

Note

Individual item settings have priority over component settings.

razor

<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:

razor

<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:

razor

<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.

Razor
CSS

razor

<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.");
    }
}

css

.icon {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    opacity: 0.7;
}
.icon-plus {
    mask-image: url(../images/plus.svg);
}

.icon-edit {
    mask-image: url(../images/edit.svg);
}

.icon-user-profile {
    mask-image: url(../images/user-profile.svg);
}

.icon-check {
    mask-image: url(../images/check.svg);
}

.icon-delete {
    mask-image: url(../images/delete.svg);
}

You can also use the button group item to submit a form. To enable form submit, set the SubmitFormOnClick property to true.

Implements

Inheritance

Object ComponentBase DxComponentBase DxButtonBase DxButtonGroupItem