selectAllChange

Fired when the user clicks the "Select all" header item or activates it via keyboard. The event is preventable — calling e.preventDefault() cancels the built-in select/deselect-all logic so the application can implement its own (for example, fetching and selecting all records from a remote data source).

The event handler function context (available via the this keyword) will be set to the widget instance.

Event Data

e.checked `Boolean`

true when the action is selecting all items, false when deselecting.

e.preventDefault `Function`

If invoked, the default select/deselect-all behavior is canceled and the widget state is left unchanged, allowing the handler to apply its own selection logic.

e.sender `kendo.ui.MultiSelect`

The widget instance which fired the event.

<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
    selectAll: true,
    checkboxes: true,
    selectAllChange: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("selectAllChange fired, checked:", e.checked);
    }
});
</script>

<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
    selectAll: true,
    checkboxes: true
});
var multiselect = $("#multiselect").data("kendoMultiSelect");
multiselect.bind("selectAllChange", function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("selectAllChange fired, checked:", e.checked);
});
</script>

Example - prevent the default behavior and apply custom selection logic

<select id="multiselect" multiple="multiple">
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
    selectAll: true,
    checkboxes: true,
    selectAllChange: function(e) {
        e.preventDefault();
        if (e.checked) {
            this.value(["Item1", "Item2", "Item3"]);
        } else {
            this.value([]);
        }
        this.refresh();
        this._change();
    }
});
</script>