|
| 1 | +--- |
| 2 | +title: Overview |
| 3 | +page_title: Overview | ButtonGroup JSP Tag |
| 4 | +description: "Get started with the ButtonGroup JSP tag in Kendo UI." |
| 5 | +slug: overview_buttongroup_uiforjsp |
| 6 | +position: 1 |
| 7 | +--- |
| 8 | + |
| 9 | +# ButtonGroup JSP Tag Overview |
| 10 | + |
| 11 | +The ButtonGroup JSP tag is a server-side wrapper for the [Kendo UI ButtonGroup](/api/javascript/ui/buttongroup) widget. |
| 12 | + |
| 13 | +## Getting Started |
| 14 | + |
| 15 | +Make sure you are familiar with some of the fundamental [Kendo UI widget concepts]({% slug getting_started_installation_kendoui %}) and |
| 16 | +that the [Kendo UI Java wrappers]({% slug overview_uiforjsp %}) are set up correctly. |
| 17 | + |
| 18 | +### The Basics |
| 19 | + |
| 20 | +The ButtonGroup widget groups a series of buttons together on a single line. |
| 21 | + |
| 22 | +### Initialization |
| 23 | + |
| 24 | +The example below demonstrates how to initialize the ButtonGroup by using the default `buttongroup` tag. |
| 25 | + |
| 26 | +###### Example |
| 27 | + |
| 28 | + <kendo:buttonGroup name="select-period"> |
| 29 | + <kendo:buttonGroup-items> |
| 30 | + <kendo:buttonGroup-item text="Month"> |
| 31 | + </kendo:buttonGroup-item> |
| 32 | + <kendo:buttonGroup-item text="Quarter"> |
| 33 | + </kendo:buttonGroup-item> |
| 34 | + <kendo:buttonGroup-item text="Year"> |
| 35 | + </kendo:buttonGroup-item> |
| 36 | + </kendo:buttonGroup-items> |
| 37 | + </kendo:buttonGroup> |
| 38 | + |
| 39 | +## Features |
| 40 | + |
| 41 | +### Enable and Disable ButtonGroup |
| 42 | + |
| 43 | +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. |
| 44 | + |
| 45 | +The following example demonstrates how to enable and disable the ButtonGroup. |
| 46 | + |
| 47 | +###### Example |
| 48 | + |
| 49 | + <kendo:buttonGroup name="select-period" enable="false"> |
| 50 | + <kendo:buttonGroup-items> |
| 51 | + <kendo:buttonGroup-item text="Month"> |
| 52 | + </kendo:buttonGroup-item> |
| 53 | + <kendo:buttonGroup-item text="Quarter"> |
| 54 | + </kendo:buttonGroup-item> |
| 55 | + <kendo:buttonGroup-item text="Year"> |
| 56 | + </kendo:buttonGroup-item> |
| 57 | + </kendo:buttonGroup-items> |
| 58 | + </kendo:buttonGroup> |
| 59 | + |
| 60 | +For more information on the [`enable` method of the ButtonGroup](/api/javascript/ui/buttongroup#methods-enable), refer to the [ButtonGroup API](/api/javascript/ui/buttongroup). |
| 61 | + |
| 62 | +### Index |
| 63 | + |
| 64 | +The initially selected index of the ButtonGroup can be configured by using its `index` property. An index can also be selected over the `select()` method with an Integer argument. |
| 65 | + |
| 66 | +The following example demonstrates how to select a button by its index. |
| 67 | + |
| 68 | + <kendo:buttonGroup name="align" selection="single" index="0"> |
| 69 | + <kendo:buttonGroup-items> |
| 70 | + <kendo:buttonGroup-item icon="align-left"> |
| 71 | + </kendo:buttonGroup-item> |
| 72 | + <kendo:buttonGroup-item icon="align-center"> |
| 73 | + </kendo:buttonGroup-item> |
| 74 | + <kendo:buttonGroup-item icon="align-right"> |
| 75 | + </kendo:buttonGroup-item> |
| 76 | + </kendo:buttonGroup-items> |
| 77 | + </kendo:buttonGroup> |
| 78 | + |
| 79 | +For more information on the [`select` method of the ButtonGroup](/api/javascript/ui/buttongroup#methods-select), refer to the [ButtonGroup API](/api/javascript/ui/buttongroup). |
| 80 | + |
| 81 | +## Reference |
| 82 | + |
| 83 | +### Existing Instance |
| 84 | + |
| 85 | +To reference an existing ButtonGroup instance, refer to the [introductory article on the ButtonGroup]({% slug overview_kendoui_buttongroup_widget %}#reference). |
| 86 | + |
| 87 | +## See Also |
| 88 | + |
| 89 | +Other articles on Telerik UI for JSP and on the ButtonGroup: |
| 90 | + |
| 91 | +* [Overview of the Kendo UI ButtonGroup Widget]({% slug overview_kendoui_buttongroup_widget %}) |
| 92 | +* [Telerik UI for JSP API Reference Folder](/api/jsp/autocomplete/animation) |
| 93 | +* [Telerik UI for JSP Tags Folder]({% slug overview_autocomplete_uiforjsp %}) |
0 commit comments