"Select all" in Kendo MultiSelect (MVC)

Question

I have a Kendo Grid with some custom editors, one is a multiselect. I have a cshtml file for the editor that looks like so:

@model IEnumerable<ManageSitesInTemplateViewModel>
@(Html.Kendo().MultiSelectFor(m => m)
    .AutoClose(false)
    .DataTextField("SiteName")
    .DataValueField("SiteId")
    .BindTo((IEnumerable<ManageSitesInTemplateViewModel>)ViewData["sites"])
)

It uses BindTo, which is data gotten from ViewData that is created when the page is requested. Everything works fine just as it should, no problems there.

The problem is I have been trying to implement a "select/deselect all" button using various implementations to no avail. I have a suspicion that it's because I use BindTo.

Here is some of the examples I have tried:

How can we implement select All option in Kendo MultiselectFor

Kendo select/deselect all items demo

Kendo forums: Select All items after data is read

I can get the button to select everything correctly, but when everything is selected and I try to save the entry on the grid, the action is not fired. Nothing happens and the selection resets. Still works if I select manually.

What is going on? Full code for the custom editor:

@model IEnumerable<ManageSitesInTemplateViewModel>
@(Html.Kendo().MultiSelectFor(m => m)
    .AutoClose(false)
    .DataTextField("SiteName")
    .DataValueField("SiteId")
    .BindTo((IEnumerable<ManageSitesInTemplateViewModel>)ViewData["sites"])
)

<button class="k-button" id="selectall123">Select All</button>

<script type="text/javascript">
    $(document).ready(function () {
        $("#selectall123").on('click', function (e) {
            e.preventDefault();
            var multiselect = $('#Sites').data("kendoMultiSelect");

            var all = $.map(multiselect.dataSource.data(), function (dataItem) {
                return dataItem.SiteId;
            });
            multiselect.value(all);
        });
    });
</script>

Answer 1

After getting help from Telerik's own forum, they supplied me with this solution that works. I'm just gonna quote directly from them:

When using the MultiSelect's value() method, the model bound to the widget will not be updated, because this method does not trigger a change event. You can bypass this by manually triggering change after selecting the items:

The code with the answer:

<script type="text/javascript">
    $(document).ready(function () {
        $("#selectall123").on('click', function (e) {
            // ...
             
            multiselect.value(all);
            multiselect.trigger("change");
        });
    });
</script>

Answer 2

I had the same issue. This is an example that worked for me.

@(Html.Kendo().MultiSelect().Name("Config_MetricType")
    .BindTo(Model.Config_MetricTypes)
    .DataValueField("MetricTypeId")
    .DataTextField("MetricDisplayName")
    .Events(e => e.DataBound("selectAllMetrics"))
    .HtmlAttributes(new { style = "width: 50%", @class = "pull-left" }))

JavaScript function:

function selectAllMetrics() {
    var Config_MetricType = $("#Config_MetricType").data("kendoMultiSelect");
    var all = $.map(Config_MetricType.dataSource.data(), function (dataItem) {
        return dataItem.MetricTypeId; //DataValueField
    });
    Config_MetricType.value(all);
    Config_MetricType.trigger("change");
}