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

Scrollable

configuration

If enabled, the ContextMenu displays buttons that scroll the items when they cannot fit the viewport height. By default, scrolling is disabled.

scrollable

Boolean|Object

Default: false

<div id="target">Target</div>
<ul id="context-menu">
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

<script>
    $("#context-menu").kendoContextMenu({
        target: "#target",
        scrollable: true
    });
</script>

Sets the scroll amount (in pixels) that the ContextMenu scrolls when the scroll buttons are hovered. Each such distance is animated and then another animation starts with the same distance. If clicking a scroll button, the ContextMenu scrolls by doubling the distance.

Default: 50

<div id="target">Target</div>
<ul id="context-menu">
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

<script>
    $("#context-menu").kendoContextMenu({
        scrollable: {
            distance: 20
        }
    });
</script>

Scrollable

scrollable

scrollable.distance