MultiSelect Select All Issue

[Richard]

Visual Studio 2017

.Net Core 2.2

Telerik 2019.2.514

I have a multiselect on a page that I am using a tag template to show the number of items selected out of the number of total items in the control.  This works fine except that I also have a button the user can click to select all of the items in the multiselect.  Once the user clicks the button another box appears with all of the items selected underneath the multiselect.  The multiselect does not change to show the number selected.  If I click the button numerous times, each time another box appears showing all of the selected items below the last one.  What am I doing wrong?

I have attached a screenshot and my code below.

Thanks, Rich

@using (Html.BeginForm(actionName: null, controllerName: null, method: FormMethod.Post, htmlAttributes: new { name = "myForm", id = "myForm", onkeydown = "return event.keyCode!=13" }))
{
<div class="text-center">        
            <label class="control-label FL">Select Unit(s)</label>
@(Html.Kendo().MultiSelect().Name("msUnit").BindTo(new SelectList(ViewBag.Unit, "Value", "Text")).TagMode(MultiSelectTagMode.Single).TagTemplateId("UnitTagTemplate").AutoClose(false).HtmlAttributes(new { @class = "CB FL W200" }))
@(Html.Kendo().Button().Name("btnSelectAllUnit").Content("Select All").HtmlAttributes(new { type = "button", style = "clear:both;float:left;border:solid;border-width:thin;background-color:lightgrey;height:25px;width:200px;" }).Events(events => events.Click("btnSelectAllUnitClick")))
</div>
}
<script id="UnitTagTemplate" type="text/x-kendo-template">
#:values.length# out of #:maxTotal#
</script>
<script>
function btnSelectAllUnitClick() {
var msUnit = $("#msUnit").kendoMultiSelect().data("kendoMultiSelect");
var values = $.map(msUnit.dataSource.data(), function (dataItem) {
return dataItem.value;
});
msUnit.value(values);
}
</script>

 

public IActionResult Index()
{
List<SelectListItem> units = new List<SelectListItem>()
{
new SelectListItem() {Text="0001", Value="0001"},
new SelectListItem() { Text="0001", Value="0002"},
new SelectListItem() { Text="0003", Value="0003"},
new SelectListItem() {Text="0004", Value="0004"},
new SelectListItem() { Text="0005", Value="0005"},
new SelectListItem() { Text="0006", Value="0006"},
new SelectListItem() {Text="0007", Value="0007"},
new SelectListItem() { Text="0008", Value="0008"},
new SelectListItem() { Text="0009", Value="0009"},
new SelectListItem() {Text="0010", Value="0010"},
new SelectListItem() { Text="0011", Value="0011"},
new SelectListItem() { Text="0012", Value="0012"},
};
ViewBag.Unit = units;
return View();
}

[Petar]

Hello Richard,

Thank you for the code snippet and the screenshot provided. 

The reason for the unexpected MultiSelect behavior is hidden in the btnSelectAllUnitClick() function. With 

var msUnit = $("#msUnit").kendoMultiSelect().data("kendoMultiSelect");

we are not making reference to the MultiSelect but instead, we are initializing a new one. 

The correct definition of the above method should look like:

function btnSelectAllUnitClick() {
    var msUnit = $("#msUnit").data("kendoMultiSelect");
    var values = $.map(msUnit.dataSource.data(), function (dataItem) {
        return dataItem.Value;
    });
    msUnit.value(values);
}

The marked in yellow code is the way we can take a reference to the MultiSelect component. 

I am attaching a runnable project demonstrating the described functionality. Please check it and let me know if you have any questions. 

 

Regards,
Petar
Progress Telerik