Dropdownlist编辑器在kendo ui网格中不起作用

Question

我正在尝试使我的LastName列使用下拉列表，但无法使其正常工作，我遵循了一个示例，但它不起作用。有人可以看到我要去哪里了吗，因为我不知道可能在哪里

$(document).ready(function() {

  var fullHeight = $(window).height() - 250;

  console.log("Grid Height is: " + fullHeight);

  $(window).resize(function() {
    GridResize();
  });
  var junkData2 = [{
      "CustomerID": 3,
      "FirstName": "The Skipper",
      "LastName": "Gilligan",
      "Address": "1 Main St.",
      "City": "Toledo",
      "Zip": "123456"
    },
    {
      "CustomerID": 4,
      "FirstName": "Archie Bunker",
      "LastName": "Edith Bunker",
      "Address": "2 South St.",
      "City": "Memphis",
    }
  ];
  var ds2 = [{
      "Name": "abc",
      ID: 1
    },
    {
      "Name": "def",
      ID: 2
    },
    {
      "Name": "ghi",
      ID: 3
    },
    {
      "Name": "jkl",
      ID: 4
    },
  ];

  function categoryDropDownEditor(container, options) {
    $('<input required name="' + options.field + '"/>')
      .appendTo(container)
      .kendoDropDownList({
        autoBind: false,
        dataTextField: "Name",
        dataValueField: "ID",
        dataSource: {
          data: ds2
        }
      });
  }

  $("#GridList").kendoGrid({
    dataSource: {
      data: junkData2
    },
    schema: {
      model: {
        fields: {
          CustomerID: {
            type: "number"
          },
          CustomerFirstName: {
            type: "string"
          },
          CustomerLastName: {
            type: "string"
          },
          CustomerAddress1: {
            type: "string"
          },
          City: {
            type: "string"
          },
          Zip: {
            type: "string"
          }
        },
      }
    },
    filterable: {
      mode: "row"
    },
    columns: [{
        title: "<input id='checkAll', type='checkbox', class='check-box' />",
        template: "<input name='Selected' class='checkbox' type='checkbox'>",
        width: "30px"
      },
      {
        field: "CustomerID",
        title: "CustomerID this is my customerID to keep track of",
        hidden: false,
        headerAttributes: {
          "class": "wrap-header"
        }
      },
      {
        field: "LastName",
        title: "Last Name",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        },
        editor: categoryDropDownEditor,
        template: "#=LastName #"
      },
      {
        field: "FirstName",
        title: "Name",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        }
      },
      {
        field: "Address",
        title: "Address",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        }
      },
      {
        field: "City",
        title: "City",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        }
      },
      {
        field: "Zip",
        title: "Zip",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        }
      }
    ],
    scrollable: true,
    sortable: true,
    pageable: false,
    selectable: "row",
    change: function(e) {
      // Function call goes here
      var detailRow = this.dataItem(this.select());
      var optionID = detailRow.get("CustomerID")

      //alert(optionID);
    },
    height: fullHeight
  });
});

function GridResize() {
  var gridElement = $("#GridList");
  var dataArea = gridElement.find(".k-grid-content");
  var newHeight = gridElement.parent().innerHeight() - 51;
  var diff = gridElement.innerHeight() - dataArea.innerHeight();
  gridElement.height(newHeight);
  dataArea.height(newHeight - diff);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css" />
<div id="MyDiv">
  <div id="GridList"></div>
</div>