3

Server Wrapper ではなく、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?"
        }

これは、入力ボックスに最適です。ただし、テーブルに外部キー列があります。外部キー テーブルのすべてのオプションをドロップダウンに表示し、テーブルの値に基づいて正しいオプションを選択したいと考えています。私はかなり調べましたが、これに対する答えを見つけることができませんでした。

どんな助けでも大歓迎です。

4

1 に答える 1

5

私はこれを自分で解決しました。他の誰かがこれを探しているなら、ここが解決策です。

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>
于 2013-09-30T21:30:55.117 に答える