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="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        overflow: {
            mode: "menu",
            scrollButtons: "auto",
            scrollButtonsPosition: "split"
        },
        items: [
            { text: "Button 1", icon: "plus" },
            { text: "Button 2", icon: "gear" },
            { text: "Button 3", icon: "star" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</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="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        overflow: {
            mode: "scroll"
        },
        items: [
            { text: "Button 1", icon: "plus" },
            { text: "Button 2", icon: "gear" },
            { text: "Button 3", icon: "star" },
            { text: "Button 4", icon: "save" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</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="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        overflow: {
            mode: "scroll",
            scrollButtons: "visible"
        },
        items: [
            { text: "Button 1", icon: "plus" },
            { text: "Button 2", icon: "gear" },
            { text: "Button 3", icon: "star" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</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="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        overflow: {
            mode: "scroll",
            scrollButtons: "visible",
            scrollButtonsPosition: "end"
        },
        items: [
            { text: "Button 1", icon: "plus" },
            { text: "Button 2", icon: "gear" },
            { text: "Button 3", icon: "star" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>

toolbar.overflow.scrollDistance

Number

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

Default: 50

<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
    toolbar: {
        overflow: {
            mode: "scroll",
            scrollButtons: "visible",
            scrollDistance: 100
        },
        items: [
            { text: "Button 1", icon: "plus" },
            { text: "Button 2", icon: "gear" },
            { text: "Button 3", icon: "star" }
        ]
    },
    dataSource: [
        { id: 1, title: "Task 1", status: "todo" }
    ],
    columns: [
        { text: "To Do", status: "todo" }
    ]
});
</script>