使用MultiSelect自定义弹出编辑器的Kendo Grid - 无法在模型中获取所选项目

Question

所以标题几乎说明了一切.我正在尝试将新的MultiSelect小部件合并到Grid的自定义弹出编辑器模板中.

我正在使用数据属性初始化方法并从远程dataSource读取下拉选项.这一切都正常,但我无法将所选项的值放入模型中.

保存行时,会向服务器发送一个数据数组,表示在MultiSelect中选择的第一个数据项,而不是以逗号分隔的所选值列表.

我有什么想法可以将MultiSelect值(所选值的列表/数组)放入网格模型中？

谢谢

编辑:我现在使用了一种解决方法,但我很想知道是否有一种"正确的方法"将MultiSelects与网格结合使用.

解决方法是在Grid的配置中添加类似的内容:

save: function(e) { 
    e.model.items = $('#select_items').data("kendoMultiSelect").value();
}

这是弹出编辑器模板的相关部分:

<input name="select_items" id="select_items" data-value-field="id" 
data-text-field="description" data-source="itemsDataSource" 
data-role="multiselect" data-auto-bind="false" data-item-template="itemList">

我没有进入select_items模型定义:我正在使用上面的解决方法来复制模型中MultiSelect的值items.这似乎有效,我只是不知道为什么有必要.

Answer 1

要MultiSelect在网格中使用,需要考虑几个问题:

1. 电网编辑只支持类型为列string,boolean,number和date.既然你想要保存一个数组...让我们说string你将不得不解决这个问题.
2. 由于您从服务器接收值数组,因此必须使用a template将其序列化为a string以显示从服务器接收的值.
3. KendoUI无法猜测您是否希望使用MultiSelect作为输入,因此您必须提供并editor运行.

让我们解决所有这些问题:

为了解决这个问题array的string最简单的办法是不是说什么是接收什么KendoUI.

对于template,我将使用JavaScript join方法将所有值拉到一起,用","分隔.就像是:

{ field: "Cities", template: "#= Cities.join(', ') #" }

最后,对于编辑器,我使用:

{ field: "Cities", template: "#= Cities.join(', ') #", editor : citiesEditor }

function citiesEditor(container, options) {
    $("<select multiple='multiple' data-bind='value : Cities'/>").appendTo(container).kendoMultiSelect({
        dataSource: citiesDS
    });
}

凡在我而言citiesDS只是一个array的string与有效的城市的名称.

var citiesDS = [
    "Boston", "Kirkland", "London", "New York", "Philadelphia", "Redmond", "Seattle", "Tacoma"
];

更新(保存)时,它会向主机发送一个array包含Cities字段中引入的城市的字符串.

示例:这里http://jsfiddle.net/OnaBai/Q2w7z/