剑道多选值设置Bug [英] Kendo Multiselect value setting Bug

问题描述

我在使用剑道多选时遇到了这个奇怪的问题.

<input type="button" onclick="fillaList();"值=填充列表"/><input type="button" onclick="clearList();"值="初始化列表"/>var list=[{label:'tag1', value:'1'},{标签:'tag9'，值:'9'}，{标签:'tag8'，值:'8'}，{标签:'tag7'，值:'7'}，{标签:'tag6'，值:'6'}，{标签:'tag5'，值:'5'}，{标签:'tag4'，值:'4'}，{标签:'tag3'，值:'3'}，{label:'tag2', value:'2'}];函数填充数据(tagIds){var tagObj = $("#addTags").data("kendoMultiSelect");if (tagObj == undefined) {//如果没有加载$("#addTags").kendoMultiSelect({数据文本字段:标签"，数据值字段:值"，数据源:列表，值:tagIds，占位符:从列表中选择"，改变:函数(){//改变}});} else {//如果已经加载，则只更改值.tagObj.value(tagIds);console.log(tagIds);console.log(tagObj.value());}}函数 fillaList(){var tagIds=[1,2,3];填充数据(tagIds)；}函数 clearList(){填充数据([]);}

http://jsfiddle.net/ruchan/AgV52/1/

问题复制

• 点击初始化列表"，然后通过键盘向框中添加新标签.

• 现在点击填充列表按钮.未选择所有值.或有时仅选择 1 个

鼠标选择时不存在这个问题.

我在 Chrome v32.0.1700.107 m 中测试

解决方案

在多选中设置新值之前，您应该在 tagObj.dataSource.filter({}); 之前清理过滤器>

你的函数应该是:

function fillData(tagIds){var tagObj = $("#addTags").data("kendoMultiSelect");if (tagObj == undefined) {//如果没有加载$("#addTags").kendoMultiSelect({数据文本字段:标签"，数据值字段:值"，数据源:列表，值:tagIds，占位符:从列表中选择"，改变:函数(){//改变}});} else {//如果已经加载，则只更改值.//在设置新值之前清理数据源过滤器tagObj.dataSource.filter({});tagObj.value(tagIds);console.log(tagIds);console.log(tagObj.value());}}

您的 JSFiddle 在这里修改:http://jsfiddle.net/OnaBai/AgV52/2/

I having this weird problem with kendo multiselect.

<input id="addTags" /><br>
<input type="button" onclick="fillaList();" value="fill List" />
<input type="button" onclick="clearList();" value="Init List" />

var list=[{label:'tag1', value:'1'},
         {label:'tag9', value:'9'},
         {label:'tag8', value:'8'},
         {label:'tag7', value:'7'},
         {label:'tag6', value:'6'},
         {label:'tag5', value:'5'},
         {label:'tag4', value:'4'},
         {label:'tag3', value:'3'},
         {label:'tag2', value:'2'}];

function fillData(tagIds){ 

    var tagObj = $("#addTags").data("kendoMultiSelect");
    if (tagObj == undefined) { // if not loaded
        $("#addTags").kendoMultiSelect({
            dataTextField: "label",
            dataValueField: "value",
            dataSource: list,
            value: tagIds, placeholder: "Select from list",
            change: function() {
                // change
            }
        });
    } else { // if already loaded only change the values.
        tagObj.value(tagIds);
        console.log(tagIds);
        console.log(tagObj.value());
    }
}
function fillaList(){
    var tagIds=[1,2,3];
    fillData(tagIds);
}
function clearList(){
    fillData([]);
}

http://jsfiddle.net/ruchan/AgV52/1/

Problem Replication

• click "Init List" and then add new tag to the box by keyboard.

• now click fill List button. all The values are not being selected. or sometimes only 1 is selected

this problem is not there when selecting by mouse.

I tested in Chrome v32.0.1700.107 m

解决方案

Before setting new values in a multiselect, you should clean the filter before tagObj.dataSource.filter({});

Your function should be:

function fillData(tagIds){ 

    var tagObj = $("#addTags").data("kendoMultiSelect");
    if (tagObj == undefined) { // if not loaded
        $("#addTags").kendoMultiSelect({
            dataTextField: "label",
            dataValueField: "value",
            dataSource: list,
            value: tagIds, placeholder: "Select from list",
            change: function() {
                // change
            }
        });
    } else { // if already loaded only change the values.
        // Clean DataSource filter before setting new values
        tagObj.dataSource.filter({});
        tagObj.value(tagIds);
        console.log(tagIds);
        console.log(tagObj.value());
    }
}

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/AgV52/2/

这篇关于剑道多选值设置Bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！