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

ToolbarItems

configuration

An array of toolbar items to display in the header Toolbar. They will be rendered after the items generated from the configurations of the views.

toolbarItems

Array

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    toolbarItems: [
        // add 'Spacer' item move the Close button to the right
        { type: "spacer" },
        // add a 'Close' round icon button
        { type: "button", icon: "x", fillMode: "flat", rounded: "full", themeColor: "primary", click: function(e) { console.log("Close button clicked", e); } }
    ]
});
</script>

toolbarItems.click

Function

The click event handler of the toolbar item.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    toolbarItems: [
        { 
            type: "button", 
            text: "Custom Action",
            click: function(e) {
                console.log("Custom action clicked!");
            }
        }
    ]
});
</script>

toolbarItems.fillMode

String

The fill mode of the toolbar item. Available options are solid, outline, flat or none.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    toolbarItems: [
        { type: "button", fillMode: "outline", text: "Action" }
    ]
});
</script>

toolbarItems.icon

String

The icon name of the toolbar item.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    toolbarItems: [
        { type: "button", icon: "save", text: "Save" }
    ]
});
</script>

toolbarItems.rounded

String

The rounded mode of the toolbar item. Available options are small, medium, large, full or none.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    toolbarItems: [
        { type: "button", rounded: "medium", text: "Action", fillMode: "outline" }
    ]
});
</script>

toolbarItems.themeColor

String

The theme color of the toolbar item. Available options are base, primary, secondary, tertiary, success, warning, error, info, inverse.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    toolbarItems: [
        { type: "button", themeColor: "primary", text: "Action" }
    ]
});
</script>

toolbarItems.type

String

The type of the toolbar item. Available options are button or spacer.

<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
    toolbarItems: [
        { type: "button", text: "Custom Action", icon: "save" }
    ]
});
</script>