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

Items

configuration

Specifies the menu buttons of the SplitButton.

items

Array

<button id="splitbutton" type="button">Button</button>
<script>
    $("#splitbutton").kendoSplitButton({
        items: [
            { id: "item1", text: "Item1", click: function(ev){alert("Item 1 clicked!");} },
            { id: "item2", text: "Item2", icon: "gear", attributes: { "data-context": "some arbitrary data" }},
            { id: "item3", text: "Item3", imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"},
            { id: "item4", text: "Item4" },
            { id: "item5", text: "Item5", enabled: false },
            { id: "item6", text: "Item6", hidden: true  }
        ],
    });
</script>

items.attributes

Object

Adds custom attributes to the LI element of the menu button.

<button id="splitButton">Command</button>
<script>
    $("#splitButton").kendoSplitButton({
        items: [
            { text: "Item 1", attributes: { "data-value": "value1", "data-info": "custom" } },
            { text: "Item 2", attributes: { "data-value": "value2", "class": "special-item" } }
        ]
    });
</script>

items.click

Function

Adds unique click callback for the menu item.

<button id="splitButton">Command</button>
<script>
    $("#splitButton").kendoSplitButton({
        items: [
            {
                text: "Save",
                click: function(e) {
                    console.log("Save clicked", e);
                    alert("Document saved!");
                }
            },
            {
                text: "Delete",
                click: function(e) {
                    console.log("Delete clicked", e);
                    if (confirm("Are you sure?")) {
                        alert("Document deleted!");
                    }
                }
            }
        ]
    });
</script>

items.data

Function

Adds a custom data callback to be added to the context of menu item - useful to attach context dynamically.

<button id="splitButton">Command</button>
<script>

    var commands = {
        "command_one": function () {
            alert("Command One Executed!")
        },
        "command_two": function () {
            alert("Command Two Executed!")
        },
        "default_command": function () {
            alert("Default Executed!")
        }
    }

    function getContext(item) {
        return {
            command: commands[item.id]
        }
    }

    var splitButton = $("#splitButton").kendoSplitButton({
        items: [
            { id: "command_one", text: "Command 1", data: getContext},
            { id: "command_two", text: "Command 2", data: getContext}
        ],
        click: function(ev) {
            if (ev.target.data("command")) {
                ev.target.data("command")();
            } else {
                commands["default_command"]();
            }
        }
    }).data("kendoSplitButton");
</script>

items.enabled

Boolean

Toggles the enabled state of the item.

Default: true

<button id="splitButton">Command</button>
<script>
    $("#splitButton").kendoSplitButton({
        items: [
            { text: "Available Option", enabled: true },
            { text: "Disabled Option", enabled: false },
            { text: "Another Available", enabled: true }
        ]
    });
</script>

items.hidden

Boolean

Indicates wether the item should hidden.

Default: false

<button id="splitButton">Command</button>
<script>
    $("#splitButton").kendoSplitButton({
        items: [
            { text: "Visible Option", hidden: false },
            { text: "Hidden Option", hidden: true },
            { text: "Another Visible", hidden: false }
        ]
    });
</script>

items.icon

String

Specifies the icon of the item.

<button id="splitButton">Command</button>
<script>
    $("#splitButton").kendoSplitButton({
        items: [
            { text: "Save", icon: "save" },
            { text: "Download", icon: "download" },
            { text: "Print", icon: "print" }
        ]
    });
</script>

items.id

String

Specifies the id of the item.

<button id="splitButton">Command</button>
<script>
    $("#splitButton").kendoSplitButton({
        items: [
            { text: "Option 1", id: "option-1" },
            { text: "Option 2", id: "option-2" },
            { text: "Option 3", id: "option-3" }
        ]
    });
</script>

items.imageUrl

String

Specifies the image of the item.

pseudo

    <button id="splitButton">Command</button>
    <script>
        $("#splitButton").kendoSplitButton({
            items: [
                { text: "Profile", imageUrl: "/images/profile.png" },
                { text: "Settings", imageUrl: "/images/settings.png" },
                { text: "Help", imageUrl: "/images/help.png" }
            ]
        });
    </script>

items.spriteCssClass

String

Specifies the custom CSS class that is added to the sprite icon element of the item.

<button id="splitButton">Command</button>
<script>
    $("#splitButton").kendoSplitButton({
        items: [
            { text: "Home", spriteCssClass: "k-sprite sprite-home" },
            { text: "Dashboard", spriteCssClass: "k-sprite sprite-dashboard" },
            { text: "Reports", spriteCssClass: "k-sprite sprite-reports" }
        ]
    });
</script>

items.text

String

Specifies the text of the item.

<button id="splitButton">Command</button>
<script>
    $("#splitButton").kendoSplitButton({
        items: [
            { text: "New Document" },
            { text: "Open Document" },
            { text: "Save Document" },
            { text: "Print Document" }
        ]
    });
</script>

items.url

String

Specifies the url of the item - it will render a element and will navigate the browser on click.

<button id="splitButton">Command</button>
<script>
    $("#splitButton").kendoSplitButton({
        items: [
            { text: "Home", url: "/home" },
            { text: "Products", url: "/products" },
            { text: "Support", url: "/support" },
            { text: "Contact", url: "/contact" }
        ]
    });
</script>