Skip to content

Commit 4475e46

Browse files
VigneshNatarajan27VigneshNatarajan27
authored
Merge branch 'hotfix/hotfix-v31.2.2' into 993969-Underscore
2 parents 7e86345 + 807d52a commit 4475e46

File tree

2 files changed

+185
-0
lines changed

2 files changed

+185
-0
lines changed

‎blazor-toc.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1607,6 +1607,9 @@
16071607
<li>
16081608
<a href="/blazor/chip/types">Types</a>
16091609
</li>
1610+
<li>
1611+
<a href="/blazor/chip/events">Events</a>
1612+
</li>
16101613
<li>
16111614
<a href="/blazor/chip/customization">Customization</a>
16121615
</li>

‎blazor/chip/events.md‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
layout: post
3+
title: Events in Blazor Chip Component | Syncfusion
4+
description: Explore events in Syncfusion Blazor Chip component including Created, Deleted, Destroyed, OnBeforeClick, OnClick, OnDelete, and SelectionChanged events.
5+
platform: Blazor
6+
control: Chip
7+
documentation: ug
8+
---
9+
10+
# Events in Blazor Chip Component
11+
12+
This section explains the list of events of the Chip component which will be triggered for appropriate Chip actions.
13+
14+
## Created
15+
16+
The `Created` event triggers when the Chip component rendering is completed.
17+
18+
```cshtml
19+
@using Syncfusion.Blazor.Buttons
20+
21+
<SfChip Selection="SelectionType.Multiple" Created="@OnCreated">
22+
<ChipItems>
23+
<ChipItem Text="Small"></ChipItem>
24+
<ChipItem Text="Medium"></ChipItem>
25+
<ChipItem Text="Large"></ChipItem>
26+
<ChipItem Text="Extra Large"></ChipItem>
27+
</ChipItems>
28+
</SfChip>
29+
30+
@code {
31+
private void OnCreated(object args)
32+
{
33+
// Write your code here
34+
}
35+
}
36+
```
37+
## Deleted
38+
39+
The `Deleted` event triggers when a chip item is deleted.
40+
41+
```cshtml
42+
@using Syncfusion.Blazor.Buttons
43+
44+
<SfChip Selection="SelectionType.Multiple" EnableDelete="true">
45+
<ChipItems>
46+
<ChipItem Text="Small"></ChipItem>
47+
<ChipItem Text="Medium"></ChipItem>
48+
<ChipItem Text="Large"></ChipItem>
49+
<ChipItem Text="Extra Large"></ChipItem>
50+
</ChipItems>
51+
<ChipEvents Deleted="@OnDeleted"></ChipEvents>
52+
</SfChip>
53+
54+
@code {
55+
private void OnDeleted(ChipDeletedEventArgs args)
56+
{
57+
// Write your code here
58+
}
59+
}
60+
```
61+
## Destroyed
62+
63+
The `Destroyed` event triggers when the Chip component is disposed.
64+
65+
```cshtml
66+
@using Syncfusion.Blazor.Buttons
67+
68+
<SfChip Selection="SelectionType.Multiple" Destroyed="@OnDestroyed">
69+
<ChipItems>
70+
<ChipItem Text="Small"></ChipItem>
71+
<ChipItem Text="Medium"></ChipItem>
72+
<ChipItem Text="Large"></ChipItem>
73+
<ChipItem Text="Extra Large"></ChipItem>
74+
</ChipItems>
75+
</SfChip>
76+
77+
@code {
78+
private void OnDestroyed(object args)
79+
{
80+
// Write your code here
81+
}
82+
}
83+
```
84+
## OnBeforeClick
85+
86+
The `OnBeforeClick` event triggers before a chip is clicked.
87+
88+
```cshtml
89+
@using Syncfusion.Blazor.Buttons
90+
91+
<SfChip Selection="SelectionType.Multiple">
92+
<ChipItems>
93+
<ChipItem Text="Small"></ChipItem>
94+
<ChipItem Text="Medium"></ChipItem>
95+
<ChipItem Text="Large"></ChipItem>
96+
<ChipItem Text="Extra Large"></ChipItem>
97+
</ChipItems>
98+
<ChipEvents OnBeforeClick="@OnBeforeChipClick"></ChipEvents>
99+
</SfChip>
100+
101+
@code {
102+
private void OnBeforeChipClick(ChipEventArgs args)
103+
{
104+
// Write your code here
105+
}
106+
}
107+
```
108+
109+
## OnClick
110+
111+
The `OnClick` event triggers when a chip is clicked.
112+
113+
```cshtml
114+
@using Syncfusion.Blazor.Buttons
115+
116+
<SfChip Selection="SelectionType.Multiple">
117+
<ChipItems>
118+
<ChipItem Text="Small"></ChipItem>
119+
<ChipItem Text="Medium"></ChipItem>
120+
<ChipItem Text="Large"></ChipItem>
121+
<ChipItem Text="Extra Large"></ChipItem>
122+
</ChipItems>
123+
<ChipEvents OnClick="@OnChipClick"></ChipEvents>
124+
</SfChip>
125+
126+
@code {
127+
private void OnChipClick(ChipEventArgs args)
128+
{
129+
// Write your code here
130+
}
131+
}
132+
```
133+
## OnDelete
134+
135+
The `OnDelete` event triggers before removing the chip.
136+
137+
```cshtml
138+
@using Syncfusion.Blazor.Buttons
139+
140+
<SfChip Selection="SelectionType.Multiple" EnableDelete="true">
141+
<ChipItems>
142+
<ChipItem Text="Small"></ChipItem>
143+
<ChipItem Text="Medium"></ChipItem>
144+
<ChipItem Text="Large"></ChipItem>
145+
<ChipItem Text="Extra Large"></ChipItem>
146+
</ChipItems>
147+
<ChipEvents OnDelete="@OnChipDelete"></ChipEvents>
148+
</SfChip>
149+
150+
@code {
151+
private void OnChipDelete(ChipEventArgs args)
152+
{
153+
// Write your code here
154+
}
155+
}
156+
```
157+
## SelectionChanged
158+
159+
The `SelectionChanged` event triggers when the selected chips are changed.
160+
161+
```cshtml
162+
@using Syncfusion.Blazor.Buttons
163+
164+
<SfChip Selection="SelectionType.Multiple">
165+
<ChipItems>
166+
<ChipItem Text="Small"></ChipItem>
167+
<ChipItem Text="Medium"></ChipItem>
168+
<ChipItem Text="Large"></ChipItem>
169+
<ChipItem Text="Extra Large"></ChipItem>
170+
</ChipItems>
171+
<ChipEvents SelectionChanged="@OnSelectionChanged"></ChipEvents>
172+
</SfChip>
173+
174+
@code {
175+
private void OnSelectionChanged(SelectionChangedEventArgs args)
176+
{
177+
// Write your code here
178+
}
179+
}
180+
```
181+
182+

0 commit comments

Comments
 (0)