CODEWITHSUNDEEP
javascriptjquerykendo-uiautocompletetelerik
CMartins
CMartins

Reputation: 3293

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

Upvotes: 0

Views: 413

Answers (1)

CommonPlane
CommonPlane

Reputation: 145

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

Upvotes: 1

Related Questions