toolbar.items

Array

<div id="imageEditor"></div>
<script>
    $("#imageEditor").kendoImageEditor({
        toolbar: {
            items: [
                "open",
                "save"
            ]
        }
    });
</script>

Apart from the built-in tools, the ImageEditor fully exposes the ToolBar.items API. This way you can specify any custom tools in the widget using the components available in the ToolBar itself.

toolbar.items.attributes

Object

Specifies the HTML attributes of a ToolBar button.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { 
                text: "Custom Button", 
                attributes: { 
                    "data-role": "custom-tool",
                    "title": "Custom tooltip",
                    "class": "my-custom-class"
                },
                click: function() { console.log("Custom button clicked"); }
            }
        ]
    }
});
</script>

toolbar.items.click

Function

Specifies the click handler of the button.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { 
                text: "Custom Action", 
                click: function(e) { 
                    console.log("Button clicked:", e); 
                    alert("Custom action executed!"); 
                } 
            }
        ]
    }
});
</script>

toolbar.items.command

String

Specifies the command of the button.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { command: "crop" },
            { command: "resize" },
            { command: "undo" }
        ]
    }
});
</script>

toolbar.items.enable

Boolean

Specifies whether the control is initially enabled or disabled. Default value is "true".

Default: true

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { text: "Enabled Button", enable: true, click: function() { console.log("Enabled clicked"); } },
            { text: "Disabled Button", enable: false, click: function() { console.log("Disabled clicked"); } }
        ]
    }
});
</script>

toolbar.items.hidden

Boolean

Determines if a button is visible or hidden. By default buttons are visible.

Default: false

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { text: "Visible Button", hidden: false, click: function() { console.log("Visible clicked"); } },
            { text: "Hidden Button", hidden: true, click: function() { console.log("Hidden clicked"); } }
        ]
    }
});
</script>

toolbar.items.icon

String

Sets icon for the item. The icon should be one of the existing in the Kendo UI theme sprite.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { text: "Crop", icon: "crop", command: "crop" },
            { text: "Resize", icon: "resize", command: "resize" },
            { text: "Save", icon: "save", command: "save" }
        ]
    }
});
</script>

toolbar.items.id

String

Specifies the ID of the button.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { 
                id: "customTool",
                text: "Custom Tool", 
                click: function() { 
                    console.log("Button with ID 'customTool' clicked"); 
                }
            }
        ]
    }
});
</script>

toolbar.items.imageUrl

String

If set, the ToolBar will render an image with the specified URL in the button.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { 
                text: "Custom Image", 
                imageUrl: "/images/custom-icon.png",
                click: function() { console.log("Custom image button clicked"); }
            }
        ]
    }
});
</script>

toolbar.items.name

String

Specifies the name of the button.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { name: "customTool", text: "Custom Tool", click: function() { console.log("Custom tool clicked"); } }
        ]
    }
});
</script>

toolbar.items.options

String

Specifies the command options of the button.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { 
                command: "crop", 
                options: { aspectRatio: "16:9" } 
            }
        ]
    }
});
</script>

toolbar.items.overflow

String

Specifies the overflow of the button.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { text: "Always", overflow: "always" },
            { text: "Never", overflow: "never" },
            { text: "Auto", overflow: "auto" }
        ]
    }
});
</script>

toolbar.items.primary

Boolean

Specifies whether the button is primary. Primary buttons receive different styling.

Default: false

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { text: "Primary Button", primary: true, click: function() { console.log("Primary clicked"); } },
            { text: "Secondary Button", primary: false, click: function() { console.log("Secondary clicked"); } }
        ]
    }
});
</script>

toolbar.items.showIcon

String

Specifies where the button icon will be displayed. Possible values are: "toolbar", "overflow" or "both" (default).

Default: "both"

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { text: "Toolbar Icon", icon: "crop", showIcon: "toolbar" },
            { text: "Overflow Icon", icon: "resize", showIcon: "overflow" },
            { text: "Both", icon: "save", showIcon: "both" }
        ]
    }
});
</script>

toolbar.items.showText

String

Specifies where the text will be displayed. Possible values are: "toolbar", "overflow" or "both" (default).

Default: "both"

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { text: "Toolbar Only", showText: "toolbar", icon: "crop" },
            { text: "Overflow Only", showText: "overflow", icon: "resize" },
            { text: "Both", showText: "both", icon: "save" }
        ]
    }
});
</script>

toolbar.items.spriteCssClass

String

Defines a CSS class (or multiple classes separated by spaces) which will be used for button icon.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { 
                text: "Custom Icon", 
                spriteCssClass: "my-custom-icon k-icon",
                click: function() { console.log("Custom icon clicked"); }
            }
        ]
    }
});
</script>

toolbar.items.template

String|Function

Specifies what element will be added in the ToolBar wrapper. Items with template does not have a type.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { 
                template: (data) => `<button class="k-button">Custom: ${data.text || 'Button'}</button>`,
                click: function() { console.log("Template button clicked"); }
            }
        ]
    }
});
</script>

toolbar.items.text

String

Sets the text of the button.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { text: "My Custom Tool", click: function() { console.log("Custom tool clicked"); } }
        ]
    }
});
</script>

toolbar.items.togglable

Boolean

Specifies if the button is togglable, e.g. has a selected and unselected state.

Default: false

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { 
                text: "Toggle Mode", 
                togglable: true,
                click: function(e) { 
                    console.log("Toggle state:", e.selected); 
                } 
            }
        ]
    }
});
</script>

toolbar.items.type

String

Specifies the type of the button.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        items: [
            { type: "button", text: "Custom Tool", click: function() { console.log("Custom clicked"); } }
        ]
    }
});
</script>