Как установить значения данных на Kendo Multi Select?

Я использую Kendo Multi Select. Я хочу загрузить выбранные значения в multi select. Как вы устанавливаете значения данных в Java Script? У меня есть следующий скрипт:

$('#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();
                    },
                });
7
jquery kendo-ui telerik

3 ответов

можно использовать value() метод установки значений.

пример, дайте следующий HTML:

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

и 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"]);
});

если вы нажмете на button многозначного input получает: name1, name2 и name6.

редактировать если вы хотите добавить к текущим выбранным значениям, то сделайте:

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

Примечание: по какой-то причине вы не сможете использовать selected массив для установки новых значений, поэтому вы должны создать новый.

проверьте его запуск здесь

17

есть более простой способ сделать это. все элементы управления kendo имеют богатый API на стороне клиента. Итак, вот страница документации API MultiSelect -http://docs.kendoui.com/api/web/multiselect

теперь перейдем к вашей проблеме-вот мое решение:

разметка:

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

теперь, чтобы установить выбранные значения для окна выбора, вам просто нужно использовать метод value (). Вот код: Чтобы установить один значение: 

required.value("Laura Fuller")

установить несколько значений:

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

теперь, чтобы очистить значения вы просто установите пустую строку в качестве значения

required.value("");

теперь, если вы хотите добавить что-либо в уже выбранный список, вы можете сделать то, что @OnaBai показал свой фрагмент.

вот и все, что есть в виджете:)

надеюсь, это было полезно.

1

хорошо, я боролся с этим даже после того, как у меня был ответ. В моей сетке кендо было более 6000 предметов для выбора. Это работало большую часть времени. Это было просто, когда я обновил выбор, который вызывал у меня проблемы.

следующий код решил мою проблему:

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

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