剑道网格内的下拉列表输入

Question

快速解释我的问题：我有一个可编辑的剑道网格，其中一列是下拉列表，定义如下：

$('<input required data-text-field="fullName" data-value-field="approverGuid" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        index: 0,
        dataTextField: "fullName",
        dataValueField: "approverGuid",
        autoBind: false,
        dataSource: {
            transport: {
                read: {
                    dataType: 'json',
                    url: '/requisitions/ajax/getreqapprovers?account=' + accountNum
                }
            },
        },
        value: options.field
    });

我的问题是，在初始网格加载时，当我想显示 fullName 字段时，该列只是一个常规文本元素，填充有approverGuid 字段。当我在网格中单击时，下拉列表被创建，我们现在看到与我们之前看到的approverGuid 对应的正确fullName。我可以在我的下拉列表中选择任何名称，更新，它会正确地将approverGuid写入我的数据库，但它也会恢复到我的网格中的approverGuid，因为下拉列表元素已经消失了。

关于如何在不丢失更新我的数据库所需的 Guid 值的情况下最初显示名称的任何建议？

Answer 1

如果我理解正确，您需要显示“fullName”而不是“approverGuid”

如果是这样，我希望您的 dataSource 中有一个模型定义。如果没有，请查看Kendo API MODEL

例如：

var dataSource = new kendo.data.DataSource({
  schema: {
    model: {
       id: "ID",
       fields: {
         ID: { editable: false, nullable: true },
         approverGuid: { type: "number", validation: { required: true } },
         fullName: { type: "string", validation: { required: true } }
    }
  }

一旦你有了一个模型，你就可以访问一个数据项，使用它你可以为网格列定义一个模板

例如：

columns: [
        {
          field: "approverGuid",
          title: "approverGuid",
          template: function (dataItem) {
              var html = '<span class="">' + kendo.htmlEncode(dataItem.fullName) + '</span>';
                    return html;
          },
          editor: function (container, options) {
            $('<input required data-text-field="fullName" data-value-field="approverGuid" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
             .kendoDropDownList({
                index: 0,
             dataTextField: "fullName",
             dataValueField: "approverGuid",
             autoBind: false,
             dataSource: {
               transport: {
                  read: {
                    dataType: 'json',
                    url: '/requisitions/ajax/getreqapprovers?account=' + accountNum
                }
             },
          },
          value: options.field
            });
           }
        }]

所以现在模板将显示全名，一旦您处于编辑模式，您将显示下拉列表。希望这会有所帮助