Kendo UI Web Grid - Popup_Editor 模板 - 下拉菜单

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>