Edit this page

items.buttons Array

Specifies the buttons of ButtonGroup.

Example

<div id="toolbar"></div>

<script>
$("#toolbar").kendoToolBar({
  items: [
    {
      type: "buttonGroup",
      buttons: [
        { text: "foo" },
        { text: "bar" },
        { text: "baz" }
      ]
    }
  ]
});
</script>

items.buttons.attributes Object

Specifies the HTML attributes of a ButtonGroup's button.

HTML attributes which are JavaScript keywords (e.g. class) must be quoted.

Example

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        { type: "buttonGroup", buttons: [
            { text: "foo", attributes: { "class": "red" } },
            { text: "bar", attributes: { "class": "blue" } }
        ] }
        ]
    });
</script>
<style>
    .red { background-color: red; }
    .blue { background-color: blue; }
</style>

items.buttons.click Function

Specifies the click event handler of the button. Applicable only for the children of a ButtonGroup.

Example

<div id="toolbar"></div>

<script>
function onClick() {
  console.log("click");
}

$("#toolbar").kendoToolBar({
  items: [
    {
      type: "buttonGroup",
      buttons: [
        { text: "foo", click: onClick },
        { text: "bar", click: onClick },
        { text: "baz", click: onClick }
      ]
    }
  ]
});
</script>

items.buttons.enable Boolean (default: true)

Specifies whether the button is initially enabled or disabled.

Example

<div id="toolbar"></div>

<script>
$("#toolbar").kendoToolBar({
  items: [
    {
      type: "buttonGroup",
      buttons: [
        { text: "foo", enable: false },
        { text: "bar" },
        { text: "baz" }
      ]
    }
  ]
});
</script>

items.buttons.group String

Assigns the button to a group. Applicable only for the children of a ButtonGroup that has togglable true.

Example

<div id="toolbar"></div>

<script>
$("#toolbar").kendoToolBar({
  items: [
    {
      type: "buttonGroup",
      buttons: [
        { text: "foo", togglable: true, group: "myGroup" },
        { text: "bar", togglable: true, group: "myGroup" },
        { text: "baz", togglable: true, group: "myGroup" }
      ]
    }
  ]
});
</script>

items.buttons.hidden Boolean (default: false)

Determines if the button is visible or hidden. By default the buttons are visible.

Example

<div id="toolbar"></div>

<script>
$("#toolbar").kendoToolBar({
  items: [
    {
      type: "buttonGroup",
      buttons: [
        { text: "foo" },
        { text: "bar" },
        { text: "baz", hidden: true }
      ]
    }
  ]
});
</script>

items.buttons.icon String

Sets icon for the menu button. The icon should be one of the existing in the Kendo UI theme sprite.

Example

<div id="toolbar"></div>

<script>
$("#toolbar").kendoToolBar({
  items: [
    {
      type: "buttonGroup",
      buttons: [
        { text: "foo", icon: "clock" },
        { text: "bar", icon: "note" },
        { text: "baz", icon: "refresh" }
      ]
    }
  ]
});
</script>

items.buttons.id String

Specifies the ID of the button.

By design the widget will render two buttons - the one located in the ToolBar container will receive the specified ID, the one located in the Overflow Popup container will receive the specified ID but with _overflow suffix. If the ID will be used for determining which button is clicked in the click or toggle event handler, the developer should use the ID property of the event data which always contains the specified ID without suffix.

Example

<div id="toolbar"></div>

<script>
$("#toolbar").kendoToolBar({
  items: [
    {
      type: "buttonGroup",
      buttons: [
        { text: "foo", id: "foo" },
        { text: "bar", id: "bar" },
        { text: "baz", id: "baz" }
      ]
    }
  ]
});
</script>

items.buttons.imageUrl String

If set, the ToolBar will render an image with the specified URL in the button.

Example

<div id="toolbar"></div>

<script>
var baseUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons";
$("#toolbar").kendoToolBar({
  items: [
    {
      type: "buttonGroup",
      buttons: [
        { text: "foo", imageUrl: baseUrl + "/sports/snowboarding.png" },
        { text: "bar", imageUrl: baseUrl + "/sports/snowboarding.png" }
      ]
    }
  ]
});
</script>

items.buttons.selected Boolean (default: false)

Specifies if the toggle button is initially selected. Applicable only for the children of a ButtonGroup that has togglable true.

Example

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "buttonGroup",
            buttons: [
            { text: "foo", togglable: true, selected: true },
            { text: "bar", togglable: true },
            ]
        }
        ]
    });
</script>

items.buttons.showIcon String (default: "both")

Applicable only for the buttons of a ButtonGroup. Specifies where the icon of the button will be displayed. Whether it should be displayed always (both), only when the button is visible on the ToolBar (toolbar), or only when the button is overflowed (overflow).

Example

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [{
            type: "button",
            text: "This button has a very long text so the ButtonGroup would be collapsed on larger screen"
        },{
            type: "buttonGroup",
            buttons: [
                { text: "foo", icon: "clock", showIcon: "overflow" },
                { text: "bar", icon: "error", showIcon: "both" },
                { text: "baz", icon: "refresh", showIcon: "toolbar" }
            ]
        }]
    });
</script>

items.buttons.showText String (default: "both")

Applicable only for the buttons of a ButtonGroup. Specifies where the text of the button will be displayed. Whether it should be displayed always (both), only when the button is visible on the ToolBar (toolbar), or only when the button is overflowed (overflow).

Example

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [{
            type: "button",
            text: "This button has a very long text so the ButtonGroup would be collapsed on larger screen"
        },{
            type: "buttonGroup",
            buttons: [
                { text: "foo", icon: "clock", showText: "overflow" },
                { text: "bar", icon: "error", showText: "both" },
                { text: "baz", icon: "refresh", showText: "toolbar" }
            ]
        }]
    });
</script>

items.buttons.spriteCssClass String

Defines a CSS class (or multiple classes separated by spaces) which will be used for button icon.

Example

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
      items: [
        {
          type: "buttonGroup",
          buttons: [
            { text: "foo", spriteCssClass: "foo, bar" },
            { text: "bar", spriteCssClass: "bar" },
            { text: "baz", spriteCssClass: "baz" }
          ]
        }
      ]
    });
</script>

items.buttons.toggle Function

Specifies the toggle event handler of the button. Applicable only for the children of a ButtonGroup.

Example

<div id="toolbar"></div>

<script>
    function toggle(e) {
        console.log(e.group);
    }

    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "buttonGroup",
            buttons: [
            { text: "foo", togglable: true, group: "myGroup", toggle: toggle },
            { text: "bar", togglable: true, group: "myGroup", toggle: toggle }
            ]
        }
        ]
    });
</script>

items.buttons.togglable Boolean

Specifies if the button is togglable, e.g. has a selected and unselected state. Applicable only for the children of a ButtonGroup.

Example

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "buttonGroup",
            buttons: [
            { text: "foo", togglable: true },
            { text: "bar", togglable: true }
            ]
        }
        ]
    });
</script>

items.buttons.text String

Specifies the text of the menu button.

Example

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "buttonGroup",
            buttons: [
            { text: "foo" },
            { text: "bar" }
            ]
        }
        ]
    });
</script>

items.buttons.url String

Specifies the url of the button to navigate to.

Example

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "buttonGroup",
            buttons: [
            { text: "foo", url: "http://www.telerik.com" },
            { text: "bar", url: "http://www.google.com" },
            ]
        }
        ]
    });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy