Select all button in MultiSelectFor using ".bindto"

3 posts, 0 answers
  1. Gunnar
    Gunnar avatar
    2 posts
    Member since:
    Feb 2015

    Posted 31 Aug Link to this post

    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. Dimitar
    Admin
    Dimitar avatar
    225 posts

    Posted 04 Sep Link to this post

    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.
  3. Gunnar
    Gunnar avatar
    2 posts
    Member since:
    Feb 2015

    Posted 07 Sep in reply to Dimitar Link to this post

    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.

Back to Top