Wie werden Datenwerte auf Kendo Multi Select eingestellt?

Question

Ich benutze ein Kendo Multi Select. Ich möchte ausgewählte Werte in die Mehrfachauswahl laden. Wie legen Sie die Datenwerte in Java Script fest? Ich habe das folgende Skript:

$('#selectedFilters').kendoMultiSelect({ 
        dataSource: data, 
        dataTextField: 'name', 
        dataValueField: 'value', 
        filter: 'contains', 
        placeholder: "Add Filter", 
        delay: 0, 
        minLength: 2, 
        highlightFirst: true, 
        ignoreCase: true, 
        change: function (event) { 
         applyFilters(); 
        }, 
       }); 

Answer 1

Sie value() Methode zur Festsetzung der Werte verwenden können.

Beispiel, geben Sie den folgenden HTML:

<a href="#" id="button" class="k-button">Select</a> 
<input id='selectedFilters'> 

und JavaScript:

var data = [ 
    { name : "name1", value : "value1" }, 
    { name : "name2", value : "value2" }, 
    { name : "name3", value : "value3" }, 
    { name : "name4", value : "value4" }, 
    { name : "name5", value : "value5" }, 
    { name : "name6", value : "value6" } 
]; 
var multiselect = $('#selectedFilters').kendoMultiSelect({ 
    dataSource : data, 
    dataTextField : 'name', 
    dataValueField: 'value', 
    filter  : 'contains', 
    placeholder : "Add Filter", 
    delay   : 0, 
    minLength  : 2, 
    highlightFirst: true, 
    ignoreCase : true, 
    change  : function (event) { 
     console.log("change"); 
    } 
}).data("kendoMultiSelect"); 

$("#button").on("click", function() { 
    console.log("multiselect", multiselect); 
    multiselect.value(["value1", "value2", "value6"]); 
}); 

Wenn Sie auf button klicken Sie auf den Mehrwert input bekommt: name1, name2 und name6.

EDIT Wenn Sie den aktuellen ausgewählten Werte hinzufügen wollen, dann tun:

$("#button").on("click", function() { 
    var selected = multiselect.value(); 
    var res = $.merge($.merge([], selected), ["value1", "value2", "value6"]); 
    multiselect.value(res); 
}); 

HINWEIS: Für irgendeine Art von Grund, warum Sie nicht selected Array zum Einstellen neuer Werte wiederverwendet werden können, so dass Sie ein erstellen sollten ein neues.

Check it here

Answer 2

Laufen gibt es einen einfacheren Weg, dies zu tun. Alle Kendo-Steuerelemente verfügen über eine umfangreiche clientseitige API. So, hier ist die API-Dokumentation Seite von Multiselect - http://docs.kendoui.com/api/web/multiselect

jetzt zum Problem kommen - hier ist meine Lösung:

Markup:

<select id="required" multiple="multiple" data-placeholder="Select attendees..."> 
      <option>Steven White</option> 
      <option>Nancy King</option> 
      <option>Anne King</option> 
      <option>Nancy Davolio</option> 
      <option>Robert Davolio</option> 
      <option>Michael Leverling</option> 
      <option>Andrew Callahan</option> 
      <option>Michael Suyama</option> 
      <option>Anne King</option> 
      <option>Laura Peacock</option> 
      <option>Robert Fuller</option> 
      <option>Janet White</option> 
      <option>Nancy Leverling</option> 
      <option>Robert Buchanan</option> 
      <option>Margaret Buchanan</option> 
      <option>Andrew Fuller</option> 
      <option>Anne Davolio</option> 
      <option>Andrew Suyama</option> 
      <option>Nige Buchanan</option> 
      <option>Laura Fuller</option> 
     </select> 

JavaScript:

// create MultiSelect from select HTML element 
var required = $("#required").kendoMultiSelect().data("kendoMultiSelect"); 

Jetzt in Um die ausgewählten Werte für das Auswahlfeld festzulegen, müssen Sie nur die Methode value() verwenden. Hier ist der Code: einzigen Wert einstellen:

required.value("Laura Fuller") 

mehr Wert einstellen:

required.value(["Laura Fuller","Laura Peacock"]); 

nun die Werte löschen Sie nur leere Zeichenkette als Wert gesetzt

required.value(""); 

Wenn Sie nun etwas an die bereits ausgewählte Liste anhängen möchten, können Sie tun, was @OnaBai sein Snippet anzeigt.

Das ist alles, es gibt den Widget ist :)

Hoffnung war nützlich.

Answer 3

Ok, ich kämpfte mit ist auch nachdem ich die Antwort hatte. Mein Kendo Grid hatte mehr als 6.000 Artikel zur Auswahl. Es funktionierte die meiste Zeit. Gerade als ich die Auswahl aktualisiert habe, hatte ich Probleme.

Der folgende Code behoben mein Problem:

// Remove previous selected Filters. (This was undocumented method. I got from Kendo) 
multiSelect.dataSource.filter({}); 

// Set the new filters 
multiSelect.value(newlySelectedFilters);