New to Kendo UI for jQuery? Start a free 30-day trial

Overflow

configuration

Configures the overflow behavior of the hosted ToolBar. The configuration is forwarded verbatim to the hosted ToolBar instance.

overflow

Object

<div id="toolbar"></div>
<script>
$("#toolbar").kendoFloatingToolBar({
  visible: true,
  overflow: {
    mode: "scroll",
    scrollButtons: "visible",
    scrollButtonsPosition: "split",
    scrollDistance: 100
  },
  items: [
    { type: "button", text: "Button 1" },
    { type: "button", text: "Button 2" },
    { type: "button", text: "Button 3" },
    { type: "button", text: "Button 4" },
    { type: "button", text: "Button 5" },
    { type: "button", text: "Button 6" }
  ]
});
</script>

overflow.mode

String

Defines the overflow mode of the hosted ToolBar. The available options are:

"menu" — Moves overflowing items into a dropdown menu.
"scroll" — Keeps items visible and enables horizontal scrolling.
"section" — Groups items into collapsible sections.
"none" — Disables overflow handling; items may be cut off.

Default: "menu"

<div id="toolbar"></div>
<script>
$("#toolbar").kendoFloatingToolBar({
  visible: true,
  overflow: {
    mode: "scroll"
  },
  items: [
    { type: "button", text: "Button 1" },
    { type: "button", text: "Button 2" },
    { type: "button", text: "Button 3" }
  ]
});
</script>

overflow.scrollButtons

String

Defines the visibility of scroll buttons when overflow.mode is "scroll". The available options are:

"auto" — Displays scroll buttons only when needed.
"hidden" — Hides the scroll buttons at all times.
"visible" — Always shows the scroll buttons.

Default: "auto"

<div id="toolbar"></div>
<script>
$("#toolbar").kendoFloatingToolBar({
  visible: true,
  overflow: {
    mode: "scroll",
    scrollButtons: "visible"
  },
  items: [
    { type: "button", text: "Button 1" },
    { type: "button", text: "Button 2" },
    { type: "button", text: "Button 3" }
  ]
});
</script>

overflow.scrollButtonsPosition

String

Defines the placement of the scroll buttons of the hosted ToolBar. The available options are:

"split" — Scroll buttons appear at both ends of the toolbar.
"start" — Scroll buttons appear only at the start of the toolbar.
"end" — Scroll buttons appear only at the end of the toolbar.

Default: "split"

<div id="toolbar"></div>
<script>
$("#toolbar").kendoFloatingToolBar({
  visible: true,
  overflow: {
    mode: "scroll",
    scrollButtonsPosition: "end"
  },
  items: [
    { type: "button", text: "Button 1" },
    { type: "button", text: "Button 2" },
    { type: "button", text: "Button 3" }
  ]
});
</script>

overflow.scrollDistance

Number

Specifies the distance, in pixels, the hosted ToolBar scrolls when a scroll button is clicked.

Default: 200

<div id="toolbar"></div>
<script>
$("#toolbar").kendoFloatingToolBar({
  visible: true,
  overflow: {
    mode: "scroll",
    scrollDistance: 50
  },
  items: [
    { type: "button", text: "Button 1" },
    { type: "button", text: "Button 2" },
    { type: "button", text: "Button 3" }
  ]
});
</script>