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>