“Select all” in Kendo MultiSelect (mvc)

Question

I have a kendo grid with some custom editors, one is a multiselect (this one http://demos.telerik.com/aspnet-mvc/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:

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>

Answer 1

I got the same dude and 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");
}

Answer 2

I will post the solution I eventually got, in case anyone else finds their way to this question. 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>