This is a migrated thread and some comments may be shown as answers.

Select all button in MultiSelectFor using ".bindto"

2 Answers 149 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Gunnar
Top achievements
Rank 1
Gunnar asked on 31 Aug 2017, 09:10 AM

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>

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 04 Sep 2017, 08:27 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Gunnar
Top achievements
Rank 1
answered on 07 Sep 2017, 08:54 AM

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.

Tags
MultiSelect
Asked by
Gunnar
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Gunnar
Top achievements
Rank 1
Share this question
or