Events in Blazor Chip Component

7 Aug 20268 minutes to read

This section lists the events triggered by the Chip component and their event arguments.

Event Triggered when Cancelable
Created The Chip component has finished rendering. No
OnBeforeClick A chip is about to be clicked. Yes
OnClick A chip is clicked. No
OnDelete A chip is about to be removed. Yes
Deleted A chip item is removed from the ChipList. No
SelectionChanged The selection of chips changes. No
Destroyed The Chip component is disposed. No

Created

The Created event fires after the Chip component finishes rendering.

Event Argument Type Description
args object Event arguments provided by the framework. 
@using Syncfusion.Blazor.Buttons

<SfChip Selection="SelectionType.Multiple">
<ChipEvents Created="@OnCreated"></ChipEvents>
    <ChipItems>
        <ChipItem Text="Small"></ChipItem>
        <ChipItem Text="Medium"></ChipItem>
        <ChipItem Text="Large"></ChipItem>
        <ChipItem Text="Extra Large"></ChipItem>
    </ChipItems>
</SfChip>

@code {
    private void OnCreated(object args)
    {
        // Place the initialization code here
    }
}

Deleted

The Deleted event fires after a chip item is removed from the ChipList. To cancel or intercept the deletion, handle OnDelete instead.

Event Argument Type Description
args ChipDeletedEventArgs Contains the deleted chip’s Text, Index, and other item details. 
@using Syncfusion.Blazor.Buttons

<SfChip Selection="SelectionType.Multiple" EnableDelete="true">
    <ChipItems>
        <ChipItem Text="Small"></ChipItem>
        <ChipItem Text="Medium"></ChipItem>
        <ChipItem Text="Large"></ChipItem>
        <ChipItem Text="Extra Large"></ChipItem>
    </ChipItems>
    <ChipEvents Deleted="@OnDeleted"></ChipEvents>
</SfChip>

@code {
    private void OnDeleted(ChipDeletedEventArgs args)
    {
        // Place the post-deletion code here
    }
}

Destroyed

The Destroyed event fires when the Chip component is disposed.

Event Argument Type Description
args object Event arguments provided by the framework. 
@using Syncfusion.Blazor.Buttons

@if (isChipVisible)
{
    <SfChip Selection="SelectionType.Multiple">
        <ChipEvents Destroyed="@OnDestroyed"></ChipEvents>
        <ChipItems>
            <ChipItem Text="Small"></ChipItem>
            <ChipItem Text="Medium"></ChipItem>
            <ChipItem Text="Large"></ChipItem>
            <ChipItem Text="Extra Large"></ChipItem>
        </ChipItems>
    </SfChip>
}

<button class="e-control" @onclick="RemoveChip">Destroy Chip</button>

@code {
    private bool isChipVisible = true;

    private void OnDestroyed(object args)
    {
        // Destroyed event is triggered when the Chip component is disposed.
    }

    private void RemoveChip()
    {
        isChipVisible = false;
    }
}

OnBeforeClick

The OnBeforeClick event fires before a chip is clicked. The action can be canceled by setting args.Cancel to true.

Event Argument Type Description
args ChipEventArgs Contains the clicked chip’s Text, Index, and a Cancel property. 
@using Syncfusion.Blazor.Buttons

<SfChip Selection="SelectionType.Multiple">
    <ChipItems>
        <ChipItem Text="Small"></ChipItem>
        <ChipItem Text="Medium"></ChipItem>
        <ChipItem Text="Large"></ChipItem>
        <ChipItem Text="Extra Large"></ChipItem>
    </ChipItems>
    <ChipEvents OnBeforeClick="@OnBeforeChipClick"></ChipEvents>
</SfChip>

@code {
    private void OnBeforeChipClick(ChipEventArgs args)
    {
        // Place the pre-click handling code here
    }
}

OnClick

The OnClick event fires when a chip is clicked.

Event Argument Type Description
args ChipEventArgs Contains the clicked chip’s Text and Index. 
@using Syncfusion.Blazor.Buttons

<SfChip Selection="SelectionType.Multiple">
    <ChipItems>
        <ChipItem Text="Small"></ChipItem>
        <ChipItem Text="Medium"></ChipItem>
        <ChipItem Text="Large"></ChipItem>
        <ChipItem Text="Extra Large"></ChipItem>
    </ChipItems>
    <ChipEvents OnClick="@OnChipClick"></ChipEvents>
</SfChip>

@code {
    private void OnChipClick(ChipEventArgs args)
    {
        // Place the click handling code here
    }
}

OnDelete

The OnDelete event fires before a chip is removed. The deletion can be canceled by setting args.Cancel to true. To handle the action after the chip is removed, the Deleted event is used.

Event Argument Type Description
args ChipEventArgs Contains the chip’s Text, Index, and a Cancel property. 
@using Syncfusion.Blazor.Buttons

<SfChip Selection="SelectionType.Multiple" EnableDelete="true">
    <ChipItems>
        <ChipItem Text="Small"></ChipItem>
        <ChipItem Text="Medium"></ChipItem>
        <ChipItem Text="Large"></ChipItem>
        <ChipItem Text="Extra Large"></ChipItem>
    </ChipItems>
    <ChipEvents OnDelete="@OnChipDelete"></ChipEvents>
</SfChip>

@code {
    private void OnChipDelete(ChipEventArgs args)
    {
        // Place the pre-deletion code here
    }
}

SelectionChanged

The SelectionChanged event fires when the selected chips are changed.

Event Argument Type Description
args SelectionChangedEventArgs Provides the chips that were added or removed from the selection.

```cshtml
@using Syncfusion.Blazor.Buttons

@code {
private void OnSelectionChanged(SelectionChangedEventArgs args)
{
// Place the selection-change handling code here
}
}

NOTE

The OnBeforeClick and OnDelete events are cancelable. The Deleted event is the post-removal counterpart of OnDelete and is not cancelable.

See also