添加到kendoMultiSelect

Question

隨着新的劍道multiselect如何將選項添加到列表，並使他們被選中？

例如，如果我有一個下拉菜單中包含：1,2,3，我想添加4和5我該怎麼做？我是否必須銷燬多重選擇，添加選項，然後重新選擇多重選擇？

Answer 1

鑑於以下multiselect定義：

var data = 
     [ 
      { text: "Africa", value: "1" }, 
      { text: "Europe", value: "2" }, 
      { text: "Asia", value: "3" }, 
      { text: "North America", value: "4" }, 
      { text: "South America", value: "5" }, 
      { text: "Antarctica", value: "6" }, 
      { text: "Australia", value: "7" } 
     ]; 

var multi = $("#select").kendoMultiSelect({ 
    dataTextField: "text", 
    dataValueField: "value", 
    dataSource: data 
}).data("kendoMultiSelect"); 

您可以使用：

var values = multi.value(); 

爲了得到值的列表。

而對於其值設置爲南美（與value 5元）和「亞洲」（與value 3元）使用方法：

multi.value(["5", "3"]) 

如果你想添加到任何有那麼值你需要一個小竅門：

var multi = $("#select").kendoMultiSelect({ 
    dataTextField: "text", 
    dataValueField: "value", 
    dataSource: data, 
    value: ["1", "2", "3"] 
}).data("kendoMultiSelect"); 

// Adding value 4 and 5 to current content 
var values = multi.value().slice(); 
$.merge(values, ["4", "5"]); 
multi.value(values); 

警告：如果值4和5已經選定你最終將讓他們重複。

Answer 2

只是想添加一些關於如何實際向多重選擇添加新值的信息。

作爲OnaBai所指出的，該代碼將項目添加到多選擇是

$("#SDropDown").data("kendoMultiSelect").dataSource.add({ Text: x, Value: y }); 

給出的.cshtml

@(Html.Kendo() 
    .MultiSelect() 
    .Name("SDropDown") 
    .AutoBind(true) 
    .Placeholder("Select s...") 
    .DataTextField("Text") 
    .DataValueField("Value") 
) 

爲了添加一個項目作爲輸入多選掛鉤文本輸入的更改事件。由於這不是唯一標識，所以我使用XPath來獲取元素<input>。這被鉤住document.ready（在.cshtml，所以逃避@）：

$(document).ready(function() { 
    var node = document.evaluate('//select[@@id="SDropDown"]/../div[contains(@@class,"k-multiselect")]/input', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; 
    if (node) 
    { 
     node.onkeypress = SChanged; 
    } 
} 

function SChanged(e) 
{ 
    // only append on enter 
    if (kendo.keys.ENTER == e.keyCode) 
    { 
     // updates multi-select data source 
     AddToOrganizations(this.value); 

     var multi = $("#SDropDown").data("kendoMultiSelect"); 

     multi.dataSource.filter({}); //clear applied filter before setting value 

     // keep all currently selected items and append the user entered text 
     // (does not check for duplicates) 
     // Also, the new values can only be selected after the data source has 
     // been updated. 
     var values = multi.value().slice(); 
     $.merge(values, [this.value]); 
     multi.value(values); 
    } 
}