Demos About Pricing Try now
Edit this page

ButtonGroup HtmlHelper Overview

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

For more information on the HtmlHelper, refer to the article on the ButtonGroup HtmlHelper for ASP.NET MVC.

Getting Started

Initialization

The following example demonstrates how to initialize the ButtonGroup.

Example
        @(Html.Kendo().ButtonGroup()
            .Name("select-period")
            .Items(t =>
                {
                        t.Add().Text("Month");
                        t.Add().Text("Quarter");
                        t.Add().Text("Year");
                }))

Icons

The ButtonGroup provides the .Icon() method for configuring icons.

Example
         @(Html.Kendo().ButtonGroup()
            .Name("player")
            .Items(t =>
            {
                    t.Add().Icon("play");
                    t.Add().Icon("pause");
                    t.Add().Icon("stop");
            }))

The previous configuration is expected to produce the HTML output from the following example.

Example
    <div class="k-button-group k-widget" data-role="buttongroup" id="player" role="group" tabindex="0">
        <span data-icon="play" aria-pressed="false" role="button" class="k-button k-button-icon">
            <span class="k-icon k-i-play"></span>
        </span>
        <span data-icon="pause" aria-pressed="false" role="button" class="k-button k-button-icon">
            <span class="k-icon k-i-pause"></span>
        </span>
        <span data-icon="stop" aria-pressed="false" role="button" class="k-button k-button-icon">
            <span class="k-icon k-i-stop"></span>
        </span>
    </div>

Features

Enable and Disable the ButtonGroup

To configure the ButtonGroup as initially disabled, use its .Enable() setting. The ButtonGroup can also be disabled or enabled at any time with JavaScript by using its .Enable() method with a Boolean argument.

For more information on the enable method of the ButtonGroup, refer to the API of the ButtonGroup control.

The following example demonstrates how to enable and disable the ButtonGroup over the .Enable() configuration.

Example

        @(Html.Kendo().ButtonGroup()
            .Name("select-period")
            .Enable(false)
            .Items(t =>
                {
                        t.Add().Text("Month");
                        t.Add().Text("Quarter");
                        t.Add().Text("Year");
                }))

Index

The initially selected index of the Kendo UI ButtonGroup can be configured by using its index property. You can select an index through the select() method with a Integer argument.

For more information on the index setting of the ButtonGroup, refer to the API of the ButtonGroup control.

The following example demonstrates how to select a button by its index.

Example

        @(Html.Kendo().ButtonGroup()
            .Name("select-period")
            .Index(1)
            .Items(t =>
                {
                        t.Add().Text("Month");
                        t.Add().Text("Quarter");
                        t.Add().Text("Year");
                }))

Selection

You can restrict the number of Buttons that can be selected through its .Selection() property within the ButtonGroup. The property can be configured for a single or multiple selection.

For more information on the selection setting of the ButtonGroup, refer to the API of the ButtonGroup control.

The following example demonstrates how to use the .Selection() configuration.

Example

        @(Html.Kendo().ButtonGroup()
            .Name("select-period")
            .Selection("multiple")
            .Items(t =>
                {
                        t.Add().Text("Month");
                        t.Add().Text("Quarter");
                        t.Add().Text("Year");
                }))

Reference

Existing Instances

For more information on how to access an instance, refer to the introductory article on the ButtonGroup.

See Also