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

这是一个场景：我想使用KendoUI为外键柱网实现自定义的自动完成编辑器

这就是解决方案：对于外键网格列，我使用默认的剑道机制，以便列显示值而不是id

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

• 当我点击autocomplete小部件时，它显示的是id而不是值
• 保存新值时，autocomplete小部件不会显示该值

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

组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;"
                }
            ]
        });
    });

//用于异步加载组的函数
var getGruppiAsync=函数（e）{
var deferred=$.deferred（），
loadGruppi=函数（）{
新建kendo.data.DataSource({
类型：“odata”，
服务器分页：false，
运输：{
阅读：“/Services/MusicStore.svc/GetGroupsByUser？id_-utete=guid'”+e.data.id_-utete+“”
},
模式：{
数据：函数（数据）{
返回数据和结果；
},
总计：功能（数据）{
返回数据d.results.length；
}
}
}).fetch（函数（数据）{
延迟.resolve（$.map（data.items），函数（item）{
返回{
值：item.id_gruppo，
文本：item.nome
};
}));
});
};
setTimeout（loadGruppi，1）；
延迟返回。承诺（）；
}; 
$.when（getGroupsAsync（e））.done（函数（组）{
$（“”）.appendTo（e.detailCell）.kendoGrid({
工具栏：[“创建”、“保存”、“取消”]，
可编辑：“incell”，
自动绑定：是的，
数据源：{
类型：“odata”，
是的，
运输：{
阅读：{
url:“/Services/MusicStore.svc/Gruppi_-tenti”
},
创建：{
url:函数（）{
return“/Services/MusicStore.svc/Gruppi_-tenti”
},
类型：“POST”，
数据：函数（数据）{
data.utete_id=e.data.id_utete；
data.id_gruppi_utete=Math.uuid（）；
data.gruppo_id=selectedGruppo；
if（data.id_gruppo）
删除数据[“id_gruppo”]；
},
},
更新：{
url：函数（数据）{
return“/Services/MusicStore.svc/Gruppi_-uteti（guid'+data.id_-Gruppi_-utete+”）”；
},
键入：“放置”，
数据：函数（数据）{
data.gruppo_id=selectedGruppo；
if（data.id_gruppo）
删除数据[“id_gruppo”]；
}
},
销毁：{
url：函数（数据）{
return“/Services/MusicStore.svc/Gruppi_-uteti（guid'+data.id_-Gruppi_-utete+”）”；
},
类型：“删除”
},
parameterMap:函数（数据，类型）{
如果（类型=“读取”）{
//调用默认的OData参数map
var结果=kendo.data.transports.odata.parameterMap（数据）；
如果（结果$filter）{
//对看起来像GUID的所有内容进行编码
var guid=/（'[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}'）/ig；
结果。$filter=result。$filter.replace（guid，“guid$1”）；
}
返回结果；
}否则返回JSON.stringify（数据）；
}
},
筛选器：{field:“utete_-id”，运算符：“eq”，值：e.data.id_-utete}，
模式：{
模型：detailModel，
总计：功能（响应）{
if（response.length==0）返回0；
返回响应。d.。\u计数；
}
},
错误：淋浴错误
},
栏目：[
{
字段：“组：id”，
标题：“Gruppi”，
编辑：详细编辑，
价值观：群体，
},
{
命令：[“销毁”]，标题：“
}
]
});
});

此函数为列组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
                    });
}

var gruppiDataSource=new kendo.data.DataSource({
类型：“odata”，
服务器分页：false，
服务器筛选：false，
运输：{
改为：“/Services/MusicStore.svc/Gruppi”，
},
模式：{
数据：函数（数据）{
返回数据和结果；
},
总计：功能（数据）{
返回数据d.results.length；
}
}
});
gruppiDataSource.read（）；
函数详细信息编辑器（容器、选项）{
//$('')
$('')
.appendTo（容器）
kendoAutoCompl先生