ButtonGroup JSP Tag Overview

The ButtonGroup JSP tag is a server-side wrapper for the Kendo UI ButtonGroup widget.

Getting Started

Make sure you are familiar with some of the fundamental Kendo UI widget concepts and that the Kendo UI Java wrappers are set up correctly.

The Basics

The ButtonGroup widget groups a series of buttons together on a single line.

Initialization

The example below demonstrates how to initialize the ButtonGroup by using the default buttongroup tag.

<kendo:buttonGroup name="select-period">
    <kendo:buttonGroup-items>
        <kendo:buttonGroup-item text="Month">
        </kendo:buttonGroup-item>
        <kendo:buttonGroup-item text="Quarter">
        </kendo:buttonGroup-item>
        <kendo:buttonGroup-item text="Year">
        </kendo:buttonGroup-item>
    </kendo:buttonGroup-items>
</kendo:buttonGroup>

Features

Enable and Disable ButtonGroup

You can configure the ButtonGroup to be initially disabled by using its enable property. The ButtonGroup can also be disabled or enabled at any time with JavaScript by using the enable() method with a Boolean argument. For more information on the enable method of the ButtonGroup, refer to the ButtonGroup API.

The following example demonstrates how to enable and disable the ButtonGroup.

<kendo:buttonGroup name="select-period" enable="false">
    <kendo:buttonGroup-items>
        <kendo:buttonGroup-item text="Month">
        </kendo:buttonGroup-item>
        <kendo:buttonGroup-item text="Quarter">
        </kendo:buttonGroup-item>
        <kendo:buttonGroup-item text="Year">
        </kendo:buttonGroup-item>
    </kendo:buttonGroup-items>
</kendo:buttonGroup>

Index

To configure the initially selected index of the ButtonGroup, use its index property. An index can also be selected over the select() method with an Integer argument. For more information on the select method of the ButtonGroup, refer to the ButtonGroup API.

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

<kendo:buttonGroup name="align" selection="single" index="0">
    <kendo:buttonGroup-items>
        <kendo:buttonGroup-item icon="align-left">
        </kendo:buttonGroup-item>
        <kendo:buttonGroup-item icon="align-center">
        </kendo:buttonGroup-item>
        <kendo:buttonGroup-item icon="align-right">
        </kendo:buttonGroup-item>
    </kendo:buttonGroup-items>
</kendo:buttonGroup>

Reference

Existing Instance

To reference an existing ButtonGroup instance, refer to the introductory article on the ButtonGroup.

See Also

In this article