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?

谢谢

我现在使用了一种解决方法，但是我想知道是否存在正确的方法"将MultiSelects与Grids一起使用.

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.

推荐答案

要在Grid中使用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只是string的array，并带有有效城市的名称.

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屋！