如何在 Kendo Multi Select 上设置数据值？

Posted 2023-05-07

【中文标题】如何在 Kendo Multi Select 上设置数据值？

【英文标题】：How to set data values on Kendo Multi Select?

【发布时间】：2013-04-13 08:14:16

【问题描述】：

我正在使用 Kendo 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();
                    ,
                );

【参考方案1】：

您可以使用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 数组来设置新值，因此您应该创建一个新值。

检查它是否运行here

【讨论】：

如何添加单个选择？

使用字符串代替数组：multiselect.value("value1")

不，我的意思是如果我选择了 5 个项目并且我想附加第 6 个项目。我会给谁做呢？

.select() 不是 KendoUI 2013.1.319 版本中的方法。

@Rodney，由于某种原因，您不能重用原始数组来设置新值，因此您应该先进行var res = $.merge($.merge([], selected), ["value1", "value2", "value6"]); 然后multiselect.value(res) 检查here

【参考方案2】：

有一种更简单的方法可以做到这一点。所有 kendo 控件都有丰富的客户端 API。所以这里是MultiSelect的API文档页面-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 显示他的 sn-p 的操作。

这就是小部件的全部内容:)

希望这是有用的。

【讨论】：

在尝试将值添加到已选择的值时，您会遇到一个奇怪的问题。 （您的示例中没有处理这种情况。）您不能简单地更改 .value() 返回的数组。你需要创建一个新数组！

【参考方案3】：

好吧，即使在我得到答案之后，我仍然在挣扎。 My Kendo Grid 有 6,000 多个项目可供选择。它大部分时间都在工作。只是当我更新选择时才引起了我的问题。

以下代码解决了我的问题：

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

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

【讨论】：

现在记录在案：docs.telerik.com/kendo-ui/api/web/multiselect#methods-value