7

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

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

当我保存该行时,一个数据数组被发送到服务器,表示在 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模型中。这似乎有效,我只是不知道为什么有必要。

4

1 回答 1

13

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

  1. 网格编辑器仅支持string、和列boolean的类型。由于您将要保存一系列 ... 假设您将不得不解决这个问题。numberdatestring
  2. 由于您从服务器接收一组值,因此您必须使用 a 将template其序列化为 astring以显示从服务器接收到的值。
  3. KendoUI 无法猜测您想使用 MultiSelect 作为输入,因此您必须提供和editor运行。

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

要解决最简单的解决方案的问题,array就是string不对 KendoUI 说什么正在接收。

对于template,我将使用 JavaScriptjoin方法将所有值拉到一起,用“,”分隔。就像是:

{ 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只是一个带有有效城市名称的地方。arraystring

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

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

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

于 2013-07-16T10:30:27.377 回答