Question

这是一个场景：我想使用Kendo UI为外键列网格实现自定义自动完成编辑器。

这是解决方案：对于外键网格列，我使用默认的kendo机制，因此列显示值而不是id。

这是问题：对于该列，我使用自定义自动完成编辑器，但是：

当我点击自动完成窗口小部件时，它会显示ID而不是值
当我保存新值时，自动完成小部件不显示值

下面的代码显示了网格初始化的详细信息（主网格未显示）。柱

GROUP_ID

是外键。变量

基

包含用于显示组名而不是id的键值列表。

getGroupsAsync（e）中

是从指定数据源读取所有可用组列表的函数。

//function used to async load groups
var getGruppiAsync = function (e) {
    var deferred = $.Deferred(),
        loadGruppi = function () {
            new kendo.data.DataSource({
                type: "odata",
                serverPaging: false,
                transport: {
                    read: "/Services/MusicStore.svc/GetGroupsByUser?id_utente=guid'" + e.data.id_utente + "'"
                },
                schema: {
                    data: function (data) {
                        return data.d.results;
                    },
                    total: function (data) {
                        return data.d.results.length;
                    }
                }
            }).fetch(function (data) {
                deferred.resolve($.map(data.items, function (item) {
                    return {
                        value: item.id_gruppo,
                        text: item.nome
                    };
                }));
            });
        };

    window.setTimeout(loadGruppi, 1);
    return deferred.promise();
}; 

$.when(getGroupsAsync(e)).done(function (groups) {
        $("<div id='group-grid'/>").appendTo(e.detailCell).kendoGrid({
            toolbar: ["create", "save", "cancel"],
            editable: "incell",
            autoBind: true,
            dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                    read: {
                        url: "/Services/MusicStore.svc/Gruppi_Utenti"
                    },
                    create: {
                        url: function () {
                            return "/Services/MusicStore.svc/Gruppi_Utenti"
                        },
                        type: "POST",
                        data: function (data) {
                            data.utente_id = e.data.id_utente;
                            data.id_gruppi_utente = Math.uuid();
                            data.gruppo_id = selectedGruppo;
                            if (data.id_gruppo)
                                delete data["id_gruppo"];
                        },
                    },
                    update: {
                        url: function (data) {
                            return "/Services/MusicStore.svc/Gruppi_Utenti(guid'" + data.id_gruppi_utente + "')";
                        },
                        type: "PUT",
                        data: function (data) {
                            data.gruppo_id = selectedGruppo;
                            if (data.id_gruppo)
                                delete data["id_gruppo"];
                        }
                    },
                    destroy: {
                        url: function (data) {
                            return "/Services/MusicStore.svc/Gruppi_Utenti(guid'" + data.id_gruppi_utente + "')";
                        },
                        type: "DELETE"
                    },
                    parameterMap: function (data, type) {
                        if (type == "read") {
                            // call the default OData parameterMap
                            var result = kendo.data.transports.odata.parameterMap(data);

                            if (result.$filter) {
                                // encode everything which looks like a GUID
                                var guid = /('[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}')/ig;
                                result.$filter = result.$filter.replace(guid, "guid$1");
                            }
                            return result;
                        } else return JSON.stringify(data);
                    }

                },
                filter: { field: "utente_id", operator: "eq", value: e.data.id_utente },
                schema: {
                    model: detailModel,
                    total: function (response) {
                        if (response.length == 0) return 0;
                        return response.d.__count;
                    }
                },
                error: showError
            },
            columns: [
                {
                    field: "group:id",
                    title: "Gruppi",
                    editor: detailEditor,
                    values: groups,
                },
                {
                    command: ["destroy"], title: "&nbsp;"
                }
            ]
        });
    });

此功能为列group_id

提供自动完成编辑器

var gruppiDataSource = new kendo.data.DataSource({
    type: "odata",
    serverPaging: false,
    serverFiltering: false,
    transport: {
        read: "/Services/MusicStore.svc/Gruppi",
    },
    schema: {
        data: function (data) {
            return data.d.results;
        },
        total: function (data) {
            return data.d.results.length;
        }
    }

});

gruppiDataSource.read();

function detailEditor(container, options) {
    //$('<input data-text-field="nome" data-text-value="nome" data-bind="value:' + options.field + '"/>')
    $('<input data-text-field="nome" data-bind="value:' + options.field + '"/>')
                    .appendTo(container)
                    .kendoAutoComplete({
                        //index: 0,
                        highlightFirst: true,
                        autoBind: false,
                        placeholder: "Select group",
                        dataTextField: "nome",
                        //dataValueField: "id_gruppo",
                        filter: "contains",
                        minLength: 3,
                        select: onGroupSelect,
                        change: function(e){

                        },
                        dataSource: gruppiDataSource
                    });
}

此代码的问题在于，当我进入编辑模式时，自动完成小部件显示组的ID而不是名称，当我保存数据时，小部件保持空白。

数据被发送到服务器但我无法获得具有正确值的gui元素。

一些建议？

用于外键网格列的Kendo UI自定义自动完成编辑器

0 个答案: