kendo-ui - kendoMultiSelectに追加

Question

新しい剣道マルチセレクトで、どのようにリストにオプションを追加してそれらを選択させるのですか？

たとえば、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();

値のリストを取得します。

また、値を南アメリカ（value5の要素）および「アジア」（value3の要素）に設定するには、次を使用します。

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);
    }
}