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

Toggle

events

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

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

toggle

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.

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.

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

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

Toggle

toggle

Event Data

e.target jQuery

e.checked Boolean

e.id String

e.sender kendo.ui.ToolBar

e.target `jQuery`

e.checked `Boolean`

e.id `String`

e.sender `kendo.ui.ToolBar`