Select all button in MultiSelectFor using ".bindto"

[Gunnar]

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 the "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". This is some of the examples I have tried:
https://stackoverflow.com/questions/28207667/how-can-we-implement-select-all-option-in-kendo-multiselectfor
http://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/selection/select-deselect-all-items
http://www.telerik.com/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>

 

[Dimitar]

Hello Gunnar,

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:

<script type="text/javascript">
$(document).ready(function () {
$("#selectall123").on('click', function (e) {
...

multiselect.value(all);
multiselect.trigger("change");
});
});
</script>

Dimitar
Progress Telerik

[Gunnar]

Thank you for your reply. I tried your solution and it works! I was kinda expecting the solution would be rather simple. I have read the documentation several times, but I did not figure out the trigger had to be applied.

Thank you very much for your help.