如何防止 Kendo MultiSelect 在网格模板中编辑后丢失值?
How to prevent Kendo MultiSelect from losing values after editing in a grid template?
我有一个显示以逗号分隔的值列表的网格,它有一个在网格模板编辑器中使用的数组。 (在服务器上,我将逗号分隔列表转换为 Kendo 多选 AngularJS 指令的数组)。我几乎所有的东西都在工作:在多选中显示、编辑和添加值。
只有一件奇怪的事情发生了:在多选中添加一个值后,在编辑器中单击保存,然后重新打开编辑器,多选然后只显示其中一个最近输入的值。我知道这些值在那里并通过管道,因为这些值会进入数据库。我可以刷新页面,打开编辑器,所有值都正确显示在多选中,包括我刚刚添加的值。
当我重新打开编辑器时,好像 kendo "forgets" 大部分值。 如何避免这种情况? MultiSelect 是否需要重新设置为值?如果可以,怎么做?
我试过添加 this onChange event, but it had no effect. I've added valuePrimitive 没有效果。我尝试指定 k-rebind,但它导致了错误。
这是 text/x-kendo-template
中使用的指令:
<select kendo-multi-select
id="zipCode"
k-placeholder="'Enter zip codes...'"
style="width: 225px"
k-on-change="dataItem.dirty=true"
k-auto-bind="false"
k-min-length="3"
k-enforce-min-length="true"
k-data-source="options.zipCodeDataSource"
k-data-text-field="'text'"
k-filter="'startsWith'"
k-filtering="options.zipCodeFiltering"
k-no-data-template="'...'"
k-ng-model="dataItem.zipArray"
k-highlight-first="true" />
这是数据源:
options.zipCodeDataSource = new kendo.data.DataSource({
severFiltering: true,
transport: {
read: {
url: serviceUrl + "ZipCode/Get",
type: "GET",
dataType: "json",
contentType: jsonType,
data: function (e) {
// get your widget.
let widget = $('#zipCode').data('kendoMultiSelect');
// get the text input
let filter = widget.input.val();
// what you return here will be in the query string
return {
filter: filter
};
}
},
},
schema: {
data: "data",
total: "Count",
model:
{
id: "text",
fields: {
text: { editable: false, defaultValue: 0 },
}
},
parse: function (response) {
return response;
}
},
error: function (e) {
}
});
如果我在 <pre>
中显示 {{dataItem.zipArray}}
,所有预期值 都在 那里。
我想知道是否需要向 kendo 网格定义中的编辑事件处理程序添加一些内容,但我不确定它会是什么。我不得不像 dropdownlist 指令那样进行绑定。
edit: function (e) {
if (e.model.marketId === 0) {
e.container.kendoWindow("title", "Add");
} else {
e.container.kendoWindow("title", "Edit");
}
// re-bind multi-select here??
// These two lines actually cause the multiselect to lose pre-existing items in dataItem.zipArray
// var multiselect = kendo.widgetInstance(angular.element('#zipCode'));
// multiselect.trigger('change');
}
...
更新:
This dojo demonstrates the issue。
- 运行道场
- 编辑合同网格中的第一条记录
- 添加邮政编码,例如 22250
- 点击保存
- 然后再次点击第一行的编辑
- 编辑器中只显示邮政编码 22250
此外,我注意到如果我将 k-min-length="3"
更改为 k-min-length="1"
,问题就会消失。但是在我正在处理的场景中,它需要是 3
.
这似乎是 kendo 本身的问题。当时报告了这个问题 here.
好的,根据telerik的回复,此问题已在2017 R3 SP1版本(2017.3.1018)中修复。您可以使用这个更新的 dojo 示例来验证它:
我有一个显示以逗号分隔的值列表的网格,它有一个在网格模板编辑器中使用的数组。 (在服务器上,我将逗号分隔列表转换为 Kendo 多选 AngularJS 指令的数组)。我几乎所有的东西都在工作:在多选中显示、编辑和添加值。
只有一件奇怪的事情发生了:在多选中添加一个值后,在编辑器中单击保存,然后重新打开编辑器,多选然后只显示其中一个最近输入的值。我知道这些值在那里并通过管道,因为这些值会进入数据库。我可以刷新页面,打开编辑器,所有值都正确显示在多选中,包括我刚刚添加的值。
当我重新打开编辑器时,好像 kendo "forgets" 大部分值。 如何避免这种情况? MultiSelect 是否需要重新设置为值?如果可以,怎么做?
我试过添加 this onChange event, but it had no effect. I've added valuePrimitive 没有效果。我尝试指定 k-rebind,但它导致了错误。
这是 text/x-kendo-template
中使用的指令:
<select kendo-multi-select
id="zipCode"
k-placeholder="'Enter zip codes...'"
style="width: 225px"
k-on-change="dataItem.dirty=true"
k-auto-bind="false"
k-min-length="3"
k-enforce-min-length="true"
k-data-source="options.zipCodeDataSource"
k-data-text-field="'text'"
k-filter="'startsWith'"
k-filtering="options.zipCodeFiltering"
k-no-data-template="'...'"
k-ng-model="dataItem.zipArray"
k-highlight-first="true" />
这是数据源:
options.zipCodeDataSource = new kendo.data.DataSource({
severFiltering: true,
transport: {
read: {
url: serviceUrl + "ZipCode/Get",
type: "GET",
dataType: "json",
contentType: jsonType,
data: function (e) {
// get your widget.
let widget = $('#zipCode').data('kendoMultiSelect');
// get the text input
let filter = widget.input.val();
// what you return here will be in the query string
return {
filter: filter
};
}
},
},
schema: {
data: "data",
total: "Count",
model:
{
id: "text",
fields: {
text: { editable: false, defaultValue: 0 },
}
},
parse: function (response) {
return response;
}
},
error: function (e) {
}
});
如果我在 <pre>
中显示 {{dataItem.zipArray}}
,所有预期值 都在 那里。
我想知道是否需要向 kendo 网格定义中的编辑事件处理程序添加一些内容,但我不确定它会是什么。我不得不像 dropdownlist 指令那样进行绑定。
edit: function (e) {
if (e.model.marketId === 0) {
e.container.kendoWindow("title", "Add");
} else {
e.container.kendoWindow("title", "Edit");
}
// re-bind multi-select here??
// These two lines actually cause the multiselect to lose pre-existing items in dataItem.zipArray
// var multiselect = kendo.widgetInstance(angular.element('#zipCode'));
// multiselect.trigger('change');
}
...
更新:
This dojo demonstrates the issue。
- 运行道场
- 编辑合同网格中的第一条记录
- 添加邮政编码,例如 22250
- 点击保存
- 然后再次点击第一行的编辑
- 编辑器中只显示邮政编码 22250
此外,我注意到如果我将 k-min-length="3"
更改为 k-min-length="1"
,问题就会消失。但是在我正在处理的场景中,它需要是 3
.
这似乎是 kendo 本身的问题。当时报告了这个问题 here.
好的,根据telerik的回复,此问题已在2017 R3 SP1版本(2017.3.1018)中修复。您可以使用这个更新的 dojo 示例来验证它: