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="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    toolbar: {
      items: [
        { name: "pdf" },
        { name: "excel" },
        { name: "custom1", text: "Custom1" },
        { name: "custom2", text: "Custom2" }
      ],
      overflow: {
        mode: "menu"
      }
    }
  });
</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.

Default: "menu"

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    toolbar: {
      items: [
        { name: "pdf" },
        { name: "excel" },
        { name: "custom1", text: "Custom1" },
        { name: "custom2", text: "Custom2" }
      ],
      overflow: {
        mode: "scroll"
      }
    }
  });
</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="treelist"></div>
<script>
$("#treelist").kendoTreeList({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { id: 1, parentId: null, name: "Jane Doe", age: 30 },
    { id: 2, parentId: 1, name: "John Doe", age: 33 }
  ],
  toolbar: {
    overflow: {
      mode: "scroll",
      scrollButtons: "visible"
    },
    items: [
      { name: "create" },
      { name: "save" },
      { name: "cancel" },
      { name: "pdf" },
      { name: "excel" }
    ]
  }
});
</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="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    toolbar: {
      items: [
        { name: "pdf" },
        { name: "excel" },
        { name: "custom1", text: "Custom1" },
        { name: "custom2", text: "Custom2" }
      ],
      overflow: {
        mode: "scroll",
        scrollButtonsPosition: "start"
      }
    }
  });
</script>

toolbar.overflow.scrollDistance

Number

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

Default: 50

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    toolbar: {
      items: [
        { name: "pdf" },
        { name: "excel" },
        { name: "custom1", text: "Custom1" },
        { name: "custom2", text: "Custom2" }
      ],
      overflow: {
        mode: "scroll",
        scrollDistance: 100
      }
    }
  });
</script>