ASP.NET Core Switch Overview
The Switch is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Switch TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Switch widget.
The Switch displays two exclusive choices. With the new Switch variables introduced in the Kendo UI for jQuery R1 2019 release, the default styling of the Switch component for each of the Sass-based Kendo UI for jQuery themes can be modified to match the desired custom layout. For more information and examples, refer to the article on implementing a custom layout for the Switch.
Initializing the Switch
The following example demonstrates how to define the Switch.
@(Html.Kendo().Switch()
.Name("switch") // The name of the Switch is mandatory. It specifies the "id" attribute of the widget.
.Checked(true)
)
<kendo-switch name="switch"
checked="true"></kendo-switch>
Basic Configuration
The configuration options of the Switch are passed as attributes.
@(Html.Kendo().Switch()
.Name("switch")
.Checked(true)
.Enabled(true))
<kendo-switch name="switch"
checked="true"
enabled="true"></kendo-switch>
Functionality and Features
The Switch provides accessibility support through its keyboard navigation.
To learn more about the appearance, anatomy, and accessibility of the Switch, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
Events
You can subscribe to all Switch events. For a complete example on basic Switch events, refer to the demo on using the events of the Slider.
Handling by Handler Name
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().Switch()
.Name("switch")
.Events(e => e
.Change("change")
)
)
<script>
function change(e) {
//Handle the change event.
}
</script>
<kendo-switch name="switch" on-change="change"></kendo-switch>
<script>
function change(e) {
//Handle the change event.
}
</script>
Handling by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
@(Html.Kendo().Switch()
.Name("switch")
.Events(e => e
.Change(@<text>
function(e) {
//Handle the change event inline.
}
</text>)
)
)
Referencing Existing Instances
To reference an existing Switch instance, use the jQuery.data() configuration option. Once a reference is established, use the Switch client-side API to control its behavior.
// Place the following after your Telerik UI Switch for ASP.NET Core declaration.
<script>
$(document).ready(function() {
// The Name() of the Switch is used to get its client-side instance.
var switch = $("#switch").data("kendoSwitch");
});
</script>