如何在网格模板中编辑后防止Kendo MultiSelect丢失值? [英] How to prevent Kendo MultiSelect from losing values after editing in a grid template?

问题描述

我有一个网格，该网格显示用逗号分隔的值列表，并且它具有一个在网格的模板编辑器中使用的数组. (在服务器上，我将逗号分隔的列表转换为Kendo多选AngularJS指令的数组).我几乎可以进行所有工作:在多选中显示，编辑和添加值.

I have a grid that displays a comma-separated list of values, and it has an array that gets used in a template editor for the grid. (On the server, I transform the comma-separated list to an array for the Kendo multiselect AngularJS directive). I have almost everything working: display, edit, and adding values in the multiselect.

发生了一件奇怪的事情:在多选中添加一个值之后，在编辑器中单击保存"，然后重新打开编辑器，多选然后仅显示最近输入的值之一.我知道这些值在那里并且正在通过管道，因为这些值将其放入数据库中.我可以刷新页面，打开编辑器，所有值正确显示在multiselect中，包括我刚刚添加的值.

There's just one weird thing happening: after I add a value in the multiselect, click Save in the editor, and reopen the editor, the multiselect then only displays one of the most-recently entered values. I know that the values are there and going through the pipeline, because the values make it into the database. I can refresh the page, open the editor, and all the values display in the multiselect correctly, including the one I just added.

当我重新打开编辑器时，kendo好像忘记"了大多数值. 如何防止这种情况?是否需要将MultiSelect反弹到这些值?如果可以，怎么办?

It's as if kendo "forgets" most of the values when I reopen the editor. How can this be prevented? Does the MultiSelect need to be rebound to the values? If so, how?

我尝试添加此onChange事件，但是它没有任何作用.我

I have tried adding this onChange event, but it had no effect. I've added valuePrimitive to no effect. I tried specifying k-rebind, but it caused an error.

这是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}}，则所有期望值 都在其中.

If I display {{dataItem.zipArray}} in a <pre> all of the expected values are there.

我想知道是否需要在kendo网格定义中的编辑事件处理程序中添加一些内容，但是我不确定会是什么.我必须为dropdownlist指令进行类似的绑定.

I wonder if something needs to be added to the edit event handler in the kendo grid definition, but I'm not sure what it would be. I've had to do binding like that for the dropdownlist directive.

    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');
    }

...

更新:

此dojo演示了此问题.

1. 运行道场
2. 在合同"网格中编辑第一条记录
3. 添加邮政编码，例如22250
4. 点击保存
5. 然后再次在第一行上单击编辑"
6. 在编辑器中仅显示邮政编码22250

此外，我注意到如果将k-min-length="3"更改为k-min-length="1"，那么问题就消失了.但是在我正在处理的场景中，它必须为3.

Also, I notice that if I change k-min-length="3" to k-min-length="1", then the issue goes away. But in the scenario I'm working on, it needs to be 3.

推荐答案

这似乎与剑道本身有关.当时报告了此问题 here.

This seems to be an issue with kendo itself. Back then this issue was reported here.

好吧，根据telerik的回复，此问题已在2017 R3 SP1版本(2017.3.1018)中修复.您可以使用以下更新的dojo示例进行验证:

Ok based on the reply from telerik, this issue has been fixed in 2017 R3 SP1 release (2017.3.1018). You can verify it by using this updated dojo example:

http://dojo.telerik.com/IREVAXar/3

这篇关于如何在网格模板中编辑后防止Kendo MultiSelect丢失值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！