При внесении изменений в сетку Kendo сетка удаляет мой выпадающий список, когда в сетке включена опция редактирования

Question

Пару дней назад у меня возникла проблема с отображением выпадающих списков в моей сетке кендо, и я получил их теперь. Сетка имеет только два столбца: RoomName (который можно редактировать) и Catalog (который имеет раскрывающийся список). Я настроил сетку для редактирования в ячейке, и я могу редактировать RooomName, но когда я перехожу и выбираю значение из соответствующего выпадающего списка, выпадающий список исчезает, и у меня остается пустое текстовое поле, и все время у меня есть для этого столбца установлено значение false для редактирования.

Я получаю сообщение об ошибке, но оно происходит из события изменения выпадающего списка, и я подозреваю, что выпадающий список исчезает и не уверен, почему ошибка возникает только тогда, когда сетка может редактироваться. Ошибка

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 ("значение", 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>