Need sample code for implementing select all /deselect all with combo box in kendo mvc grid

[froger]

Hi,

I need sample code for  implementing select all /deselect all with combo box in kendo mvc grid

 

thanks in advance

 

@model IEnumerable<Emplopyee>

@(
                Html.Kendo().MultiSelectFor(m => m)
                    .DataTextField("Name")
                    .DataValueField("Id")

                    .HtmlAttributes(new { @style = "height:auto; overflow-x:auto ;" })
                    .Filter(FilterType.Contains.ToString())
                    .BindTo((IEnumerable<Employee>)ViewData["Employees"])


)

 

[Yanislav]

Hello Mahesh,

Functionality to select and deselect all for the MultiSelect component can be achieved by using a CheckBox within the header of the component. Please review the approach I come up with : 

1. Declare a header template id in the MultiSelect configuration : 

.HeaderTemplateId("headerTemplate")

2. The template itself contains the CheckBox declaration, which will be used for the selection : 

<script id="headerTemplate">
      @(Html.Kendo().CheckBox().Events(ev=>ev.Change("onChange")).Name("checkBox").Label("Select all elements").ToClientTemplate());
</script>

3. As you can see, in the snippet above, for the Change event of the CheckBox is attached a handler "onChange" : 

<script>
    function onChange(e) {
        var ms = $("#ms").data('kendoMultiSelect');
        if (e.checked) {
            ms.value(ms.dataSource.data());
            ms.trigger("change");
        }
        else {
            ms.value([]);
        }
    }
</script>

4. As demonstrated when the handler is fired, it checks the state of the CheckBox is it checked or not and based on it, sets the value() of the MultiSelect, so if it is checked, all the data from the MultiSelect is selected, if not all the elements are deselected. 

 

Regards,
Yanislav
Progress Telerik