下拉列表在网格中显示为未定义

Question

我正在尝试通过使用网格中的自定义编辑器来添加下拉列表，并且下拉列表显示为未定义

当我单击未定义的下拉列表时，会出现一个下拉列表，并且可以从中选择一个值，但是一旦单击另一个未定义的下拉列表，它就会恢复为未定义的状态，但不会丢失所选的值。 / p>

我不知道为什么下拉列表显示为undefined并且不会保持所选值可见

var datasource = [{
    "CatalogID": 1,
    "Catalog": "Free"
  },
  {
    "CatalogID": 2,
    "Catalog": "Discount"
  },
  {
    "CatalogID": 3,
    "Catalog": "Regular"
  },
  {
    "CatalogID": 4,
    "Catalog": "Holiday"
  }
];

const DEFAULT_AREA_NAME = "1";

$(document).ready(function() {
  LoadCatalogsGrid();
});

function LoadCatalogsGrid() {
  $("#Grid").empty();
  $("#Grid").kendoGrid({
    scrollable: true,
    selectable: "row",
    filterable: false,
    height: 700,
    columns: [{
      field: "RoomName",
      title: "Room Name",
      width: "120px",
      template: "<div >#=RoomName #</div>"
    }, {
      title: "Catalog",
      field: "Catalog",
      template: '#=Catalog.CatalogName#',
      width: "200px",
      editable: false,
      editor: catalogDropDownEditor
    }],
    editable: {
      mode: "incell",
      confirmation: false
    },
    dataSource: {
      data: [{
          RoomName: "Living Room",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Kitchen",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Master Bedroom",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Mud Room",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Garage",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        }
      ],
      //schema: {
      //    model: {
      //        fields: {
      //            RoomName: { nullable: true, editable: true },
      //            AreaName: { nullable: true, editable: true },
      //            Catalog: { editable: false },
      //        }
      //    }
      //}
    },
    dataBound: function(e) {

    }
  });
}

function catalogDropDownEditor(container, options) {
  $('<input required name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
      dataTextField: "Catalog",
      dataValueField: "CatalogID",
      dataSource: {
        data: datasource
      }
    });
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>

<div id="GridWrapper">
  <div id="Grid">

  </div>
</div>

Answer 1

那是因为您没有Catalog.CatalogName之类的对象。您数据中的Catalog只是一个空字符串。您必须检查该属性是否有效以显示在模板中（例如template: '#=(data.CatalogDescription || "")#'），并且在更改下拉值后，必须将值设置为模型（及其描述）：

change: function() {
    options.model[options.field] = this.select();
    options.model[options.field + 'Description'] = this.text();
}

在下面查看更新的代码段：

var datasource = [{
    "CatalogID": 1,
    "Catalog": "Free"
  },
  {
    "CatalogID": 2,
    "Catalog": "Discount"
  },
  {
    "CatalogID": 3,
    "Catalog": "Regular"
  },
  {
    "CatalogID": 4,
    "Catalog": "Holiday"
  }
];

const DEFAULT_AREA_NAME = "1";

$(document).ready(function() {
  LoadCatalogsGrid();
});

function LoadCatalogsGrid() {
  $("#Grid").empty();
  $("#Grid").kendoGrid({
    scrollable: true,
    selectable: "row",
    filterable: false,
    height: 700,
    columns: [{
      field: "RoomName",
      title: "Room Name",
      width: "120px",
      template: "<div >#=RoomName #</div>"
    }, {
      title: "Catalog",
      field: "Catalog",
      template: '#=(data.CatalogDescription || "")#',
      width: "200px",
      editable: false,
      editor: catalogDropDownEditor
    }],
    editable: {
      mode: "incell",
      confirmation: false
    },
    dataSource: {
      data: [{
          RoomName: "Living Room",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Kitchen",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Master Bedroom",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Mud Room",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Garage",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        }
      ],
      //schema: {
      //    model: {
      //        fields: {
      //            RoomName: { nullable: true, editable: true },
      //            AreaName: { nullable: true, editable: true },
      //            Catalog: { editable: false },
      //        }
      //    }
      //}
    },
    dataBound: function(e) {

    }
  });
}

function catalogDropDownEditor(container, options) {
  $('<input required name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
      dataTextField: "Catalog",
      dataValueField: "CatalogID",
      value: options.model[options.field],
      dataSource: {
        data: datasource
      },
      change: function() {
          options.model[options.field] = this.select();
          options.model[options.field + 'Description'] = this.text();
      }
    });
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>

<div id="GridWrapper">
  <div id="Grid">

  </div>
</div>