toolbar - API Reference - Kendo UI ImageEditor

Boolean | Object

Default: true

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

toolbar.click

Function

Fires when the user clicks a command button. Toolbar Events.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        click: function(e) {
            console.log("Toolbar button clicked:", e.id);
        }
    }
});
</script>

toolbar.close

Function

Fires when the SplitButton's popup closes. Toolbar Events.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        close: function(e) {
            console.log("Toolbar popup closed:", e.target);
        }
    }
});
</script>

toolbar.items

Array

Configures the items collection of the toolbar.

<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.open

Function

Fires when the Split Button's popup opens. Toolbar Events.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        open: function(e) {
            console.log("Toolbar popup opened:", e.target);
        }
    }
});
</script>

toolbar.overflow

Object

Specifies Toolbar.overflow configuration for the toolbar.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        overflow: {
            mode: "scroll",
            scrollButtons: "visible"
        }
    }
});
</script>

toolbar.overflowClose

Function

Fires when the overflow popup container is about to close. Toolbar Events.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        overflowClose: function(e) {
            console.log("Overflow popup is closing");
        }
    }
});
</script>

toolbar.overflowOpen

Function

Fires when the overflow popup container is about to open. Toolbar Events.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        overflowOpen: function(e) {
            console.log("Overflow popup is opening");
        }
    }
});
</script>

toolbar.toggle

Function

Fires when the user changes the checked state of a toggle button. Toolbar Events.

<div id="imageEditor"></div>
<script>
$("#imageEditor").kendoImageEditor({
    toolbar: {
        toggle: function(e) {
            console.log("Toolbar button toggled:", e.id, "checked:", e.checked);
        }
    }
});
</script>

Related Members