Switch HtmlHelper Overview

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

Getting Started

The Basics

Kendo UI Switch is used to display two exclusive choices.

Configuration

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)
    )

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(e) {
            //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(e) {
                  //Handle the change event inline.
              }
            </text>)
        )
    )

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
    // Put this after your Kendo UI Switch for ASP.NET Core 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