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

Toolbar.overflow

configuration

Specifies Toolbar.overflow configuration for the toolbar.

toolbar.overflow

Object

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  toolbar: {
    items: [
      { name: "create" },
      { name: "excel" },
      { name: "pdf" },
      { name: "custom1", text: "Action 1" },
      { name: "custom2", text: "Action 2" }
    ],
    overflow: {
      mode: "scroll",
      scrollButtons: "visible",
      scrollButtonsPosition: "split",
      scrollDistance: 100
    }
  },
  editable: true
});
</script>

toolbar.overflow.mode

String

Defines the overflow mode. 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.

The new Sort, Filter, ColumnChooser tools will not work as expected with the menu option. Currently these tools are not supported by the overflow menu. It is recomended to use the scroll options when using any of these tools.

Default: "menu"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  toolbar: {
    items: [
      { name: "create" },
      { name: "excel" },
      { name: "pdf" },
      { name: "custom", text: "Custom Action" }
    ],
    overflow: {
      mode: "scroll"
    }
  },
  editable: true
});
</script>

toolbar.overflow.scrollButtons

String

Defines the visibility of scroll buttons when 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="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  toolbar: {
    items: [
      { name: "create" },
      { name: "excel" },
      { name: "pdf" }
    ],
    overflow: {
      mode: "scroll",
      scrollButtons: "visible"
    }
  },
  editable: true
});
</script>

toolbar.overflow.scrollButtonsPosition

String

Defines the placement of scroll buttons. 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="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  toolbar: {
    items: [
      { name: "create" },
      { name: "excel" },
      { name: "pdf" }
    ],
    overflow: {
      mode: "scroll",
      scrollButtons: "visible",
      scrollButtonsPosition: "end"
    }
  },
  editable: true
});
</script>

toolbar.overflow.scrollDistance

Number

Specifies the distance (in pixels) the toolbar scrolls when a scroll button is clicked.

Default: 50

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  toolbar: {
    items: [
      { name: "create" },
      { name: "excel" },
      { name: "pdf" }
    ],
    overflow: {
      mode: "scroll",
      scrollDistance: 75
    }
  },
  editable: true
});
</script>