Kendo UI Web Grid - Popup_Editor模板 - Dropdown

Question

我使用的是Kendo UI Web Grid，而不是服务器包装器之一。我只在网格中显示几个字段。其余的字段显示在创建或编辑弹出窗口中。对于这个弹出我使用的模板：

<script id="popup_editor" type="text/x-kendo-template"> 
    <div class="k-edit-label"> 
     <label for="Title">Title</label> 
    </div> 
    <div class="k-edit-field"> 
     <input type="text" class="k-input k-textbox" name="Title" data-bind="value:Title" required> 
    </div> 

</script> 

，然后我从电网调用它：

 editable: { 
      mode: "popup", 
      template: $("#popup_editor").html(), 
      confirmation: "Are you sure?" 
     } 

这个伟大的工程的输入框。不过，我的表中有一个外键列。我想在下拉列表中显示外键表中的所有选项，并根据我的表中的值选择正确的选项。我已经搜索了很多，但一直未能找到答案。

任何帮助将不胜感激。

Answer 1

我自己解决了这个问题。如果其他人正在寻找这个解决方案。

在JavaScript部分创建一个新的数据源，它可以是静态的：

var facultyRankDS = new kendo.data.DataSource({ 
    data: [ 
     { Id: null, Name: "<Please Select>"}, 
     { Id: 1, Name: "Instructor" }, 
     { Id: 2, Name: "Assistant Professor" }, 
     { Id: 3, Name: "Associate Professor" }, 
     { Id: 4, Name: "Professor" } 
    ] 
}); 

，或者它可以是动态的：

var facultyRankDS = new kendo.data.DataSource({ 
    transport: { 
     read: function(options) { 
      $.ajax({ 
       url: "api/Member.mvc/GetMemberRanks", 
       dataType: 'json', 

       success: function(result) { 
        options.success(result); 
       } 
      }); 
     } 
    } 
}); 

然后在popup_editor部分添加您的下拉列表：

<div class="k-edit-label"> 
    <label for="FacultyRankId">Rank</label> 
</div> 
<!-- dropdownlist editor for field: "FacultyRankId" --> 
<div class="k-edit-field"> 
    <input name="FacultyRankId" 
     data-bind="value:FacultyRankId" 
     data-value-field="Id" 
     data-text-field="Name" 
     data-source="facultyRankDS" 
     data-role="dropdownlist" 
     data-value-primitive="true" /> 
</div>