ASP.NET Core ToggleButton Overview

The ToggleButton 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.

Download Free Trial

The Telerik UI ToggleButton TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ToggleButton widget.

The ToggleButton provides a styled clickable UI functionality with arbitrary content. Apart from consistent Kendo UI for jQuery styling, the ToggleButton enables you to indicate whether it is active or inactive, as well as group related options between various of ToggleButton components.

• Demo page for the ToggleButton HtmlHelper

Initializing the ToggleButton

The following example demonstrates how to define the ToggleButton.

@(Html.Kendo().ToggleButton()
    .Name("toggleButton")
    .Tag("button")
    .Content("Text ToggleButton")
)

    <kendo-togglebutton name="toggleButton" tag="button">Text ToggleButton</kendo-togglebutton>

Basic Configuration

• The Name() configuration method is mandatory as its value is used for the id and the name attributes of the ToggleButton element. Moreover, the id is used to properly initialize the ToggleButton widget. You can also use the value of the id attribute to retrieve the client-side instance of the ToggleButton.
• The Content() configuration specifies the text that is rendered within the button. This option does not accept HTML, but only string values.
• The Enable() option determines whether the widget will be initially enabled (by default) of disabled.
• The Group() option specifies a group of ToggleButtons the current instance belongs to.
• The Tag() method allows the developer to determine whether the widget will be initialized from a <button> element (by default), or from an <a> element.

The following example demonstrates the available configuration options for the ToggleButton.

@(Html.Kendo().ToggleButton()
    .Name("toggleButton")
    .Content("Sample Button")
    .Enable(false)
    .Group("myGroup")
    .Tag("a")
)

<script type="text/javascript">
    $(function() {
        // The Name() of the ToggleButton is used to get its client-side instance.
        var togglebutton = $("#toggleButton").data("kendoToggleButton");
    });
</script>

<kendo-togglebutton name="toggleButton"
              enable="false"
              group="myGroup"
              tag="a">
            Sample Button
</kendo-togglebutton>

<script type="text/javascript">
    $(function() {
        // The Name() of the ToggleButton is used to get its client-side instance.
        var togglebutton = $("#toggleButton").data("kendoToggleButton");
    });
</script>

Functionality and Features

• Group ToggleButton—You can group several ToggleButton instances together.
• Icon ToggleButton—The variety of icons allow you to enhance the appearance of the button.
• Badge ToggleButton—You can add a Badge to the ToggleButton to conveniently show its status, a notification, or a short message.
• Events—The ToggleButton allows you to handle its click event and implement custom functionality.

Next Steps

• Basic Usage of the ToggleButton HtmlHelper for ASP.NET Core (Demo)

See Also

• Using the API of the ToggleButton for ASP.NET Core (Demo)
• Knowledge Base Section