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

1 Answer 59 Views
MultiSelect
froger
Top achievements
Rank 1
Iron
froger asked on 25 Jan 2022, 02:20 PM

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"])


)

 

1 Answer, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 28 Jan 2022, 01:36 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
MultiSelect
Asked by
froger
Top achievements
Rank 1
Iron
Answers by
Yanislav
Telerik team
Share this question
or