如何根據Telerik Kendo Grid中可編輯彈出行中來自服務器的數據使用所選項目創建下拉菜單？

Question

如何基於Kendo grid中可編輯彈出行中來自服務器的數據使用所選項目創建dropdown ？

下面的代碼在選擇降價中顯示選項，但沒有選擇的選項。

Json數據：

[{
    "id": 1,
    "parentId": 0,
    "name": "Gowna1"
}, {
    "id": 2,
    "parentId": 1,
    "name": "Podkat1"
}, {
    "id": 6,
    "parentId": 0,
    "name": "Gowna2"
}, {
    "id": 7,
    "parentId": 6,
    "name": "podkategoria2"
}, {
    "id": 8,
    "parentId": 1,
    "name": "podkategoria3"
}]

Kendo網格和數據源：

$(document).ready(function() {
    var
        dataSource = new kendo.data.DataSource({

            transport: {
                read: {
                    url: "{{ path('getjsondocs') }}",
                    dataType: "json"
                },
                update: {
                    url: "{{ path('updatedoc') }}",
                    type: "post",
                    dataType: "json"
                },
                destroy: {
                    url: "{{ path('deletedoc') }}",
                    type: "post",
                    dataType: "json"
                },
            },
            group: [{
                field: "category"
            }, {
                field: "subcategory"
            }],
            batch: true,
            pageSize: 40,
            schema: {
                model: {
                    id: "documentId",
                    fields: {
                        documentId: {
                            editable: false
                        },
                        documentDesc: {
                            editable: true
                        },
                        documentFile: {
                            editable: true
                        },
                        documentDateAdd: {
                            editable: false
                        },
                        documentDateMod: {
                            editable: false
                        },
                        category: {
                            editable: true
                        },
                        subcategory: {
                            editable: true
                        }
                    }
                }
            }
        });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        selectable: false,
        groupable: true,
        sortable: true,
        columns: [{
                field: "documentFile",
                title: "Plik",
                template: '<a href="files/#=documentFile#" class="home_grid_link">#=documentFileTitle#</a>'
            },
            {
                field: "documentDateAdd",
                title: "Data Dodania"
            },
            {
                field: "documentDesc",
                title: "Opis"
            },
            {
                field: "user",
                title: "Twórca"
            },
            {
                field: "category",
                title: "Kategoria"
            },
            {
                field: "subcategory",
                title: "Podkategoria"
            },
            {
                command: ["edit", "destroy"],
                title: "&nbsp;",
                width: 200
            }
        ],
        editable: {
            mode: "popup",
            confirmation: true,
            template: $("#popup_editor").html()
        }
    });

    categoriesDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: "{{ path('get_json_categories') }}",
                dataType: "json"
            }
        }
    });
});

彈出模板腳本：

<script id="popup_editor" type="text/x-kendo-template">
    <form method="post" action="{{ path('updatedoc') }}" enctype="multipart/form-data">
        <div class="k-edit-label">
            <label for="documentFile">Plik</label>
        </div>
        <div data-container-for="documentFile" class="k-edit-field">
            <input name="files" id="files" type="file" aria-label="files" />
        </div>
        <input name="documentId" id="documentId" type="text" data-bind="value:documentId" style="display: none;" />

        <div class="k-edit-label">
            <label for="documentDateAdd">Data Dodania</label>
        </div>
        <div class="k-edit-field">
            <input type="text" class="k-input k-textbox k-state-disabled" name="documentDateAdd" data-bind="value:documentDateAdd" disabled>
        </div>

        <div class="k-edit-label">
            <label for="documentDesc">Opis</label>
        </div>
        <div data-container-for="documentDesc" class="k-edit-field">
            <textarea name="documentDesc" class="k-textbox" data-bind="value:documentDesc"></textarea>
        </div>

        <div class="k-edit-label">
            <label for="user">Twórca</label>
        </div>
        <div data-container-for="user" class="k-edit-field">
            <input type="text" class="k-input k-textbox k-state-disabled" name="user" data-bind="value:user" disabled>
        </div>

        <div class="k-edit-label">
            <label for="category">Kategoria</label>
        </div>
        <div data-container-for="category" class="k-edit-field">
            <input type="text" class="k-input k-textbox" name="category" data-bind="value:category">
        </div>

        <div class="k-edit-label">
            <label for="subcategory">Podkategoria</label>
        </div>
        <div data-container-for="subcategory" class="k-edit-field">
            <input type="text" class="k-input k-textbox" name="subcategory" data-bind="value:subcategory">
        </div>


        <!-- dropdownlist-->
        <div class="k-edit-label">
            <label for="FacultyRankId">Kategoria</label>
        </div>
        <!-- dropdownlist editor for field: "FacultyRankId" -->
        <div class="k-edit-field" id="categoriesDiv">
            <input id="categoriesInput" name="id" data-bind="value:id" data-value-field="id" data-text-field="name" data-source="categoriesDS" data-role="dropdownlist" data-value-primitive="true" />
        </div>


        <button type="submit" class="k-button k-primary">Aktualizuj</button>
    </form>
</script>

Answer 1

在模板MVVM綁定中，您需要使用data-bind屬性顯示要data-bind屬性。

<input id="categoriesInput" name="id"
       data-bind="value:category"
       data-value-field="id"
       data-text-field="name"
       data-source="categoriesDS"
       data-role="dropdownlist"
       data-value-primitive="true"
/>