add selected item in kendo Multiselect after load

Question

Here is the reference

Example of Server filtering in Kendo UI MultiSelect widget

Now the thing is, I want to add selected item after it's being loaded. Since the data source is remote (acts like autocomplete), I can't attach it directly

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/multiselect/serverfiltering">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>

<div id="example" >
    <div class="demo-section k-header">
        <h4>Products</h4>
        <select id="products"></select>
    </div>
    <script>
        $(document).ready(function() {
           $("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "airline_name",
dataValueField: "airline_value",
autoBind: false,
dataSource: {
  serverFiltering: true,
  transport: {
    read: {
      url: "/**Server url **/",
    }
  }
}
});

intially dataSource is empty ...Multiselect is loaded

when is execute following code: $("#products").data("kendoMultiSelect").value([{airline_name:"AA", airline_value:"BB"}]);

//above statemnt doesnt display in selected value but shows value when called value() function });

</body>
</html>

THE URL gets JSON Array and it works like when I enter letter that is sent to controller and controller send requested matched values in JSON array.

Now I cannot use below statement to add selected items:

$("#products").data("kendoMultiSelect").values(json_array) //doesnt work

THERE IS NO DATASOURCE AT MULTISELECT LOAD . IN My case VALUES ARE NOT LOADED ALREADY . The above is just an example

OnaBai OnaBai · Accepted Answer · 2015-09-25T00:01:11

In the following code snippet you can see your example working. It is basically your code with button that selects two of the elements of the DataSource.

What you should do is define json_array as an array of the ids (in your case ProductID) if you want to select them using the text field (Chai, Aniseed Syrup..., then you should define in kendoMultiSelect that the dataValueField is ProductName and not ProductId.

$(document).ready(function() {
  $("#products").kendoMultiSelect({
    placeholder: "Select products...",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    autoBind: false,
    dataSource: {
      type: "odata",
      serverFiltering: true,
      transport: {
        read: {
          url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
        }
      }
    }
  });

  $("#sel").on("click", function() {
    $("#products").data("kendoMultiSelect").value([3, 1]);
  });
});

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>

<button id="sel" class="k-button">Select Chai &amp; Aniseed</button>
<h4>Products</h4>
<select id="products"></select>

add selected item in kendo Multiselect after load

1 Answers