Switch HtmlHelper Overview

The Switch HtmlHelper extension is a server-side wrapper for the Kendo UI Switch widget.

Getting Started

The Basics

The Kendo UI Switch displays two exclusive choices.

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI Switch.

  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.

    Example

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

  3. Add the Switch.

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

Event Handling

You can subscribe to all Switch events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example
    @(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>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Example
    @(Html.Kendo().Switch()
            .Name("switch")
            .Events(e => e
                .Change(@<text>
                function() {
                    //Handle the change event inline.
                }
                </text>)
            )
    )

Customization

Custom Switch Layout

With the new Switch variables introduced in R1 2019 release, the default styling of the Switch component for each of the Sass-based themes can be modified to match the desired custom layout.

For more information and examples, refer to the Custom Switch Component Layout article, which demonstrates how to override the default Sass values in order to achieve any of the predefined custom layouts.

Reference

Existing Instances

To reference an existing Kendo UI Switch instance, use the jQuery.data() configuration option. Once a reference is established, use the Switch API to control its behavior.

Example
// Place this after your Kendo UI Switch for ASP.NET MVC declaration.
<script>
$(function() {
    // Notice that 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