toggle

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

Important click event does not fire for buttons that have togglable: true

Event Data

e.target jQuery

The jQuery object that represents the command element.

e.checked Boolean

Boolean flag that indicates the button state.

e.id String

The id of the command element.

e.sender kendo.ui.ToolBar

The widget instance which fired the event.

Important Starting with R1 2023 the event arguments object no longer holds a reference to the ToolBar item (e.item). From that release on, the tools in the ToolBar are actual widget instances that can be taken using the kendo.widgetInstance() method: var widget = kendo.widgetInstance(e.target);. When the toggled tool is rendered in the OverflowMenu it represents a menu item. Hence, it is not a Kendo widget. A reference to the jQuery element is still available in those cases in the e.target event argument.

Example - subscribe to the "toggle" event during initialization

<div id="toolbar"></div>
<script>
    $("#toolbar").kendoToolBar({
        items: [
            { type: "button", id: "btn1", text: "Button 1", togglable: true },
            { type: "button", id: "btn2", text: "Button 2", togglable: true }
        ],
        toggle: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
            console.log("toggle", e.target.text(), e.checked);
        }
    });
</script>

Example - subscribe to the "toggle" event after initialization

<div id="toolbar"></div>
<script>
    $("#toolbar").kendoToolBar({
        items: [
            { type: "button", id: "btn1", text: "Button 1", togglable: true },
            { type: "button", id: "btn2", text: "Button 2", togglable: true }
        ]
    });

    var toolbar = $("#toolbar").data("kendoToolBar");
    toolbar.bind("toggle", function(e){
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("toggle", e.target.text(), e.checked);
    });
</script>