MultiSelect Select All Issue

2 posts, 0 answers
  1. Richard
    Richard avatar
    29 posts
    Member since:
    Jan 2017

    Posted 06 Jun 2019 Link to this post

    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();
    }

  2. Petar
    Admin
    Petar avatar
    204 posts

    Posted 11 Jun 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top