title: Drop-down in kendo-ui not retrieving data
body: <p>I am working on the test project where i fill dropdown list from web api...
  Using <a href="http://demos.telerik.com/kendo-ui/grid/editing-custom" rel="nofollow">ThisDemo</a> as it is....</p>
  
  <p>This all worked fine one time and now it consistently showing console error which i have stated at the end of question...</p>
  
  <p>I am sure there is problem only in targeting template </p>
  
  <blockquote>
    <p>{template: "#=Status.StatusName#"}</p>
  </blockquote>
  
  <p>...i am not sure if this is the right way....but when i remove this code part error disappears but dropdown show undefined instead of StatusName...</p>
  
  <p>The view code (i have used selected script)</p>
  
  <pre><code>...
      schema: {
          model: {
              id: "ProjectId",
              fields: {
                  ProjectId: { editable: true, nullable: false, type: "number" },
                  ClientId: { editable: true, nullable: false, type: "number" },
                  Name: { editable: true, nullable: true, type: "string" },
                 // Status: { editable: true, nullable: true, type: "string" },
                 Status: { defaultValue: { StatusID: 1, StatusName: "Completed" } },
                 IsActive: { editable: true, nullable: false, type: "boolean" },
              }
          }
      }
  });
  
  $("#grid").kendoGrid({
      dataSource: dataSource,
      pageable: true,
      toolbar: ["create"],
      scrollable: false,
      sortable: true,
      groupable: true,
      filterable: true,
      columns: [
          { field: "Name", title: "Project Name", width: "170px" },
          //{ field: "Status", title: "Status", width: "110px" },
          { field: "Status", title: "Status", width: "180px", editor: statusDropDownEditor, template: "#=Status.StatusName#" },
          { field: "IsActive", title: "Active", width: "50px" },
          { command: "", template: "&lt;a href='Project/Task'&gt;Manage Task&lt;/a&gt;", width: "30px", filterable: false },
          { command: "", template: "&lt;a href='Project/Setting'&gt;Setting&lt;/a&gt;", width: "30px", filterable: false },
          { command: ["edit", "delete"], title: "&amp;nbsp;", width: "80px" }
      ],
      editable: "popup"
  });
  
  function statusDropDownEditor(container, options) {
      $('&lt;input required data-text-field="StatusName" data-value-field="StatusID" data-bind="value:' + options.field + '"/&gt;')
          .appendTo(container)
          .kendoDropDownList({
              autoBind: false,
              dataSource: {
                  type: "odata",
                  transport: {
                      read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                  }
              }
          });
  }
  </code></pre>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'StatusName' of
    null(anonymous function) @
    VM1415:1pt.ui.DataBoundWidget.extend._rowsHtml @
    kendo.all.min.js:31pt.ui.DataBoundWidget.extend._renderContent @
    kendo.all.min.js:32pt.ui.DataBoundWidget.extend.refresh @
    kendo.all.min.js:32b.extend.proxy.b.isFunction.i @
    jquery.min.js:3i.extend.trigger @ kendo.all.min.js:9ht.extend._process
    @ kendo.all.min.js:11ht.extend.success @
    kendo.all.min.js:11ht.extend.read.n._queueRequest.n.online.n.transport.read.success
    @ kendo.all.min.js:11pt.extend.read.n.success @
    kendo.all.min.js:11b.Callbacks.c @
    jquery.min.js:3b.Callbacks.p.fireWith @ jquery.min.js:3k @
    jquery.min.js:5b.ajaxTransport.send.r @ jquery.min.js:5</p>
  </blockquote>
  
  <p><strong>If someone have any idea please help, any kind of help will be appreciated thanks for your time</strong></p>