Switch HtmlHelper Overview

The Telerik UI Switch HtmlHelper for ASP.NET MVC is a server-side wrapper 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.

Basic Configuration

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.
  2. Create a new action method which renders the view.

    public ActionResult Index() { return View(); }

  3. Add the Switch.

        @(Html.Kendo().Switch()
            .Name("switch") // The name of the Switch is mandatory. It specifies the "id" attribute of the Switch.
            .Checked(true)
        )
    
        <%: Html.Kendo().Switch()
            .Name("switch") // The name of the Switch is mandatory. It specifies the "id" attribute of the Switch.
            .Checked(true)
        %>
    

Events

You can subscribe to all Switch events. For a complete example on basic Slider 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() {
        // Handle the change event.
    }
    </script>
    <%: Html.Kendo().Switch()
            .Name("switch")
            .Events(e => e
                .Change("change")
            )
    %>
    <script>
        function change() {
            // 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() {
                    // Handle the change event inline.
                }
                </text>)
            )
    )

Referencing Existing Instances

To reference an existing Kendo UI 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 the Switch for ASP.NET MVC declaration.
<script>
$(function() {
    // The Name() of the Switch is used to get its client-side instance.
    var switch = $("#switch").data("kendoSwitch");
});
</script>

See Also

In this article
Not finding the help you need? Improve this article