Skip to content

Commit 3fa675f

Browse files
Ashwini-SF5049Ashwini-SF5049
committed
993136: Add events UG Documentation for Chip components
1 parent 74b3298 commit 3fa675f

File tree

2 files changed

+196
-0
lines changed

2 files changed

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

0 commit comments

Comments
 (0)