当网格启用了编辑选项时，Kendo网格内嵌编辑会删除我的下拉列表

Question

几天前，我在kendo网格中显示下拉列表时遇到问题，现在让他们显示出来。网格只有两列，RoomName（可编辑）和Catalog（具有下拉列表）。 我已经设置好要在单元格中进行编辑的网格，并且能够编辑RooomName，但是当我从相应的下拉列表中选择一个值时，该下拉列表便消失了，并且我始终有一个空的文本字段该列设置为false进行编辑。

我确实得到了一个错误，它是由于dropdownlist的change事件引起的，我怀疑是为什么dropdownlist消失了，并且不确定为什么只有在网格可以编辑时才会发生错误。错误是

Uncaught TypeError: Cannot read property 'set' of null
    at init.onDDLChange (CatalogInGrid:134)
    at init.trigger (kendo.all.js:124)
    at init._change (kendo.all.js:29481)
    at init._blur (kendo.all.js:29453)
    at Object.<anonymous> (kendo.all.js:36066)
    at fire (jquery-1.10.2.js:3062)
    at Object.add [as done] (jquery-1.10.2.js:3108)
    at init._click (kendo.all.js:36062)
    at init.proxy (jquery-1.10.2.js:841)
    at init.trigger (kendo.all.js:124)

那是

dataItem.set（“ value”，e.sender.value（））;在onDDLChange

一旦我从网格中删除了可编辑的内容，那么当我选择一个目录时，我的下拉列表就不会消失，但是我无法编辑RoomName。

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

var datasourceRooms = [{
    "RoomID": 1,
    "RoomName": "Master"
  },
  {
    "RoomID": 2,
    "RoomName": "Kitchen"
  },
  {
    "RoomID": 3,
    "RoomName": "Bathroom"
  },
  {
    "RoomID": 4,
    "RoomName": "Basement"
  }
];

function onDDLChange(e) {
  var element = e.sender.element;
  var row = element.closest("tr");
  var grid = $("#Grid").data("kendoGrid");
  var dataItem = grid.dataItem(row);

  dataItem.set("value", e.sender.value());
};

$(document).ready(function() {

  $('#Grid').kendoGrid({
    dataSource: datasourceRooms,
    columns: [{
        field: "RoomName",
        title: "Room Name",
        width: "100px"
      },
      {
        field: "Catalog",
        title: "Catalogs",
        width: "125px",
        template: columnTemplateFunction,
        editable: false
      }
    ],
    selectable: "row",
    //editable: {
    //    mode: "incell",
    //    confirmation: false
    //},
    editable: true,
    dataBound: function(e) {
      let grid = e.sender;
      let items = e.sender.items();

      items.each(function(e) {
        var dataItem = grid.dataItem(this);
        var ddt = $(this).find('.dropDownTemplate');

        $(ddt).kendoDropDownList({
          value: dataItem.value,
          dataSource: datasource,
          dataTextField: "Catalog",
          dataValueField: "CatalogID",
          change: onDDLChange
        });
      });
    }
  });








});

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#',
      width: "200px",
      editable: false,
      editor: catalogDropDownEditor
    }],
    editable: {
      mode: "incell",
      confirmation: false
    },
    dataSource: {
      data: [{
          RoomName: "Living Room",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: {
            defaultValue: {
              CatalogID: 1,
              Catalog: "Free"
            }
          }
        },
        {
          RoomName: "Kitchen",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: {
            defaultValue: {
              CatalogID: 1,
              Catalog: "Free"
            }
          }
        },
        {
          RoomName: "Master Bedroom",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: {
            defaultValue: {
              CatalogID: 1,
              Catalog: "Free"
            }
          }
        },
        {
          RoomName: "Mud Room",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: {
            defaultValue: {
              CatalogID: 1,
              Catalog: "Free"
            }
          }
        },
        {
          RoomName: "Garage",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: {
            defaultValue: {
              CatalogID: 1,
              Catalog: "Free"
            }
          }
        }
      ],
      //schema: {
      //    model: {
      //        fields: {
      //            RoomName: { nullable: true, editable: true },
      //            AreaName: { nullable: true, editable: true },
      //            Catalog: { defaultValue: { CatalogID: 1, Catalog: "Free" } }
      //        }
      //    }
      //}
    },
    dataBound: function(e) {

    }
  });
}

function columnTemplateFunction(dataItem) {
  var input = '<div class="dropDownTemplate"></div>'

  return input
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>