javascript - Kendo UI Autocomplete Select all

I have this Kendo UI autocomplete text field and I want to implement a select all/remove all option.

The requirements are when the user click on select all should update the control with all values no mater what is selected before.

So far I have:

 @(Html.Kendo().MultiSelect()
    .Name("step1")
    .Placeholder(@ResCont.Resources.placeHolderCn)
    .DataTextField("Text")
    .DataValueField("Value")
    .BindTo(EUCountries)    
    .Events(e =>
    {
        e.Change("onstep1Change");
    })

 <a href="#" id="all">select all</a>
 <a href="#" id="clear">clear</a>

I would like to use a javascript/jquery

1 Answer

  1. Laurent- Reply

    2019-11-13

    Try this:

    <script>
            $(document).ready(function() {
              // create MultiSelect from select HTML element
              var required = $("#multiselectId").kendoMultiSelect().data("kendoMultiSelect");
    
              $("#all").click(function() {
                var values = $.map(required.dataSource.data(), function(dataItem) {
                  return dataItem.value;
                });
    
                required.value(values);
              });
    
              $("#clear").click(function() {
                required.value([]);
              });
            });
    </script>
    

    refer http://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/select-deselect-all-items

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>