Kendo Grid 带有使用 MultiSelect 的自定义弹出式编辑器 - 无法在模型中获取所选项目 [英] Kendo Grid with custom popup editor using MultiSelect - can't get selected items in model

问题描述

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

So the title pretty much says it all. I'm trying to incorporate the new MultiSelect widget into a Grid's custom popup editor template.

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

I'm using the Data Attribute Initialization method and reading the dropdown options from a remote dataSource. This is all working okay, but I can't get the values of the selected items into the model.

当我保存该行时，一个数据数组被发送到服务器，代表在 MultiSelect 中选择的第一个数据项，而不是一个以逗号分隔的所选值列表.

When I save the row, an array of data is sent to the server representing the first data item selected in the MultiSelect, rather than a comma-separated list of selected values.

任何想法如何将 MultiSelect 值(选定值的列表/数组)放入网格模型中?

Any ideas how I can get the MultiSelect value (list/array of selected values) into the grid model?

谢谢

我现在使用了一种解决方法，但我很想知道是否有一种正确的方法"可以将 MultiSelect 与网格一起使用.

I've now used a workaround, but I'd be interested to know if there's a 'proper way' to use MultiSelects with Grids.

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

The workaround is to add something like this to the Grid's configuration:

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

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

This is the relevant part of the popup editor template:

<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.这似乎有效，我只是不知道为什么有必要.

I've not got select_items in the model definition: I'm using the workaround above to copy the MultiSelect's value to items which is in the model. This seems to work, I just don't know why it is necessary.

推荐答案

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

For using MultiSelect in Grids there are a couple o questions to consider:

1. 网格编辑器仅支持列string、boolean、number 和date 的类型.由于您将要保存 ... 的数组，例如 string，您将不得不解决这个问题.
2. 由于您从服务器接收一组值，因此您必须使用 template 将其序列化为 string 以显示从服务器接收的值服务器.
3. KendoUI 无法猜测您想使用 MultiSelect 作为输入，因此您必须提供 editor 功能.

1. Grid editors only support as type for columns string, boolean, number and date. Since you will want to save an array of ... let's say string you will have to work around this.
2. Since you are receiving an array of values from the server, you will have to use a template for serializing it to a string in order to display values received from the server.
3. KendoUI is not able of guessing that you want to use a MultiSelect as input so you have to provide and editor function.

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

Let's work around all these questions:

要解决string的array问题，最简单的解决方案是不对KendoUI说任何关于接收的内容.

To solve the question of array of string the simplest solution is not saying anything to KendoUI about what is receiving.

对于 template，我将使用 JavaScript join 方法将所有值合并在一起，以,"分隔.类似的东西:

For the template, I'm going to be using the JavaScript join method to pull all the values together separated by a ", ". Something like:

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

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

Finally for the editor, I use:

{ 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 和有效城市的名称.

Where in my case citiesDS is just an array of string with the name of valid Cities.

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

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

When you update (save), it will send to the host an array of strings with the cities introduced in Cities field.

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

这篇关于Kendo Grid 带有使用 MultiSelect 的自定义弹出式编辑器 - 无法在模型中获取所选项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！