Events
The Telerik UI CheckBoxGroup for ASP.NET Core exposes multiple events that allow you to control and customize the behavior of the component.
For a complete example of the basic CheckBoxGroup events, refer to the demo on using the events of the CheckBoxGroup.
Handling by Handler Name
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().CheckBoxGroup()
.Name("checkboxgroup")
.Items(i =>
{
i.Add().Label("Day pack").Value("1");
i.Add().Label("Hiking poles").Value("2");
i.Add().Label("Hiking boots").Value("3");
i.Add().Label("UV protection sunglass").Value("4");
i.Add().Label("Trousers").Value("5").Enabled(false);
})
.Value(new string[] { "1", "2" })
.Events(e => e
.Select("onSelect")
.Change("onChange")
)
)
<script>
function onSelect() {
// Handle the select event.
}
function onChange() {
// Handle the change event.
}
</script>
<script>
function onSelect() {
// Handle the select event.
}
function onChange() {
// Handle the change event.
}
</script>
<kendo-checkboxgroup name="checkboxgroup"
value="value"
on-change="onChange"
on-select="onSelect">
<kendo-checkboxgroup-items>
<kendo-checkboxgroup-item label="Day pack"
value="1">
</kendo-checkboxgroup-item>
<kendo-checkboxgroup-item label="Hiking poles"
value="2">
</kendo-checkboxgroup-item>
<kendo-checkboxgroup-item label="Hiking boots"
value="3">
</kendo-checkboxgroup-item>
</kendo-checkboxgroup-items>
</kendo-checkboxgroup>
Handling by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
@(Html.Kendo().CheckBoxGroup()
.Name("checkboxgroup")
.Items(i =>
{
i.Add().Label("Day pack").Value("1");
i.Add().Label("Hiking poles").Value("2");
i.Add().Label("Hiking boots").Value("3");
i.Add().Label("UV protection sunglass").Value("4");
i.Add().Label("Trousers").Value("5").Enabled(false);
})
.Value(new string[] { "1", "2" })
.Events(e => e
.Select(@<text>
function() {
// Handle the select event inline.
}
</text>)
.Change(@<text>
function() {
// Handle the change event inline.
}
</text>)
)
)
<kendo-checkboxgroup name="checkboxgroup"
value="value"
on-change="onChange"
on-select="onSelect">
<kendo-checkboxgroup-items>
<kendo-checkboxgroup-item label="Day pack"
value="1">
</kendo-checkboxgroup-item>
<kendo-checkboxgroup-item label="Hiking poles"
value="2">
</kendo-checkboxgroup-item>
<kendo-checkboxgroup-item label="Hiking boots"
value="3">
</kendo-checkboxgroup-item>
</kendo-checkboxgroup-items>
</kendo-checkboxgroup>