Native Events in Blazor Button Group

27 Aug 20264 minutes to read

Native DOM events (such as click, change, focus, mouse, keyboard, and touch events) can be handled on the Blazor Button Group component through Blazor’s @on{event} directive (for example, @onclick, @onchange). The value of the directive is treated as an event handler. The event-specific data is passed to the handler through the event arguments.

The following event argument types are available for the corresponding native events:

  • Focus Events - FocusEventArgs
  • Mouse Events - MouseEventArgs
  • Keyboard Events - KeyboardEventArgs
  • Touch Events - TouchEventArgs

All event argument types are from the Microsoft.AspNetCore.Components.Web namespace.

List of native events supported for default Blazor Button Group

The following native events are supported by the default Blazor Button Group component:

List of Native events      
onclick onblur onfocus onfocusout
onmousemove onmouseover onmouseout onmousedown
onmouseup ondblclick onkeydown onkeyup
onkeypress ontouchend onfocusin ontouchstart

How to bind click event to Blazor Button Group

The @onclick directive is used to bind the click event for the Blazor Button Group. The following code snippet demonstrates binding a click event to each button in the group.

@using Syncfusion.Blazor.SplitButtons

<SfButtonGroup>
    <ButtonGroupButton @onclick="OnLeftClick">Left</ButtonGroupButton>
    <ButtonGroupButton @onclick="OnCenterClick">Center</ButtonGroupButton>
    <ButtonGroupButton @onclick="OnRightClick">Right</ButtonGroupButton>
</SfButtonGroup>

@code{
    private void OnLeftClick()
    {
        // handle the left click event
    }
    private void OnCenterClick()
    {
        // handle the center click event
    }
    private void OnRightClick()
    {
        // handle the right click event
    }
}

How to bind a mouse event with arguments to Blazor Button Group

The following code snippet demonstrates how to handle a mouse event and read the MouseEventArgs payload.

@using Syncfusion.Blazor.SplitButtons
@using Microsoft.AspNetCore.Components.Web

<SfButtonGroup>
    <ButtonGroupButton @onmouseover="OnHover">
        Hover me
    </ButtonGroupButton>
</SfButtonGroup>

<p>@message</p>

@code {
    private string message = "Move mouse over the button";

    private void OnHover(MouseEventArgs args)
    {
        var x = args.ClientX;
        var y = args.ClientY;

        message = $"Mouse Position: X = {x}, Y = {y}";
    }
}

List of native events supported for Single / Multiple selection mode Blazor Button Group

The following native events are supported when the Blazor Button Group is in single or multiple selection mode (Mode="SelectionMode.Single" or Mode="SelectionMode.Multiple"):

List of Native events        
onchange oninput onblur onfocusout onfocusin
onfocus onclick onkeydown onkeyup onkeypress

How to bind onchange event to Blazor Button Group

The @onchange directive is used to bind the change event for the Button Group in selection mode. The following code snippet demonstrates binding an onchange event to each button in a single-selection Button Group.

@using Syncfusion.Blazor.SplitButtons

<SfButtonGroup Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single">
    <ButtonGroupButton @onchange="OnLeftChange">Left</ButtonGroupButton>
    <ButtonGroupButton @onchange="OnCenterChange">Center</ButtonGroupButton>
    <ButtonGroupButton @onchange="OnRightChange">Right</ButtonGroupButton>
</SfButtonGroup>

<p>@message</p>

@code {
    private string message = "No button selected";

    private void OnLeftChange ( ChangeEventArgs args )
    {
        message = $"Selected Button: Left";

    }

    private void OnCenterChange ( ChangeEventArgs args )
    {
        message = $"Selected Button: Center";
    }

    private void OnRightChange ( ChangeEventArgs args )
    {
        message = $"Selected Button: Right";
    }
}

See also