編輯事件時網格中的Kendo UI Web下拉列表

Question

我使用了Kendo UI Web網格，當我在網格中編輯記錄時，我有一個下拉列表來選擇值。 我似乎無法克服的問題是，當單擊編輯按鈕時，如何將下拉菜單的值設置為編輯前表（網格）中存在的值。

我在下面嘗試了我的代碼，每次將其移到控制台時，它每次都顯示為空白。

    $("#project-numbers-grid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: "/Project/GetProjectNumbers",
                    dataType: "json",
                    data: {
                        q: function () {
                            var model = {
                                projectid: "@Model.Id"
                            };
                            return JSON.stringify(model);
                        }
                    }
                },
                update: {
                    url: "/Project/UpdateProjectNumber",
                    dataType: "json"
                },
                destroy: {
                    url: "/Project/DeleteProjectNumber",
                    dataType: "json"
                },
                create: {
                    url: "/Project/CreateProjectNumber",
                    dataType: "json",
                    complete: function (e) {
                        $("#project-numbers-grid").data("kendoGrid").dataSource.read();
                    }
                },
                parameterMap: function (options, operation) {
                    //if (operation !== "read" && options.models) {
                    //    return { models: kendo.stringify(options.models) };
                    //}
                    if (operation === "read") {
                        return options;
                    }

                    var model = {
                        id: options.Id,
                        projectid: "@Model.Id",
                        number: options.Number,
                        active: options.Active,
                        projectphase: options.ProjectPhase
                    };
                    return model;
                }
            },
            pageSize: 4,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { editable: false },
                        ProjectPhase: { validation: { required: true } },
                        Number: { validation: { required: true } },
                        Active: { type: "boolean" }
                    }
                }
            }
        },
        toolbar: ["create"],
        edit: function (e) {
            var d = $('#project-phases').data('kendoDropDownList');
            d.value(e.model.ProjectPhase);
            console.log(d.value());
        },
        columns: [
            {
                title: "Project Phase",
                field: "ProjectPhase",
                editor: projectPhaseEditor,
                template: "#= ProjectPhase #"
            },
            {
                title: "Project Number",
                field: "Number"
            },
            "Active",
            {
                title: "&nbsp",
                command: ["edit", "destroy"]
            }
        ],
        editable: "inline",
        pageable: {
            refresh: true
        }
    });
});

function projectPhaseEditor(container, options) {
    $('<input required id="project-phases" data-text-field="ProjectPhase" data-value-field="Id" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataTextField: "ProjectPhase",
            dataValueField: "Id",
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "/Project/GetProjectPhases"
                    }

                }
            }
        });
}

這是我發現與telerik MVC助手一起使用的一些舊代碼，除了要與上面的kendo代碼一起使用外，我想要這種確切的行為。

<script type="text/javascript">
    function onProductManufacturerEdit(e) {
        $(e.form).find('#Manufacturer').data('tDropDownList').select(function (dataItem) {
            return dataItem.Value == e.dataItem['ManufacturerId'];
        });
    }
</script>

非常感謝您在編輯時從表格網格值設置下拉值的任何幫助。 謝謝

編輯：我嘗試了以下，但沒有成功...

   $("#project-phases").attr("data-value-field", e.model.ProjectPhase);

編輯：我進行了以下更改，沒有任何成功...

 function projectPhaseEditor(container, options) {
    $('<input required id="project-phases" data-text-field="ProjectPhase" data-value-                                                                        
    field="ProjectPhaseId" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataTextField: "ProjectPhase",
            dataValueField: "ProjectPhaseId",
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "/Project/GetProjectPhases"
                    }
                }
            }
        });
}

和我更新的代碼：

 var d = $('#project-phases').data('kendoDropDownList');
            d.value(e.model.ProjectPhaseId);

問題是e.model上沒有ProjectPhaseId。 有一個e.model.Id，但是該id是數據庫中的projectnumber實體之一，而不是項目階段的id。

Answer 1

我能夠成功選擇表中存在的值。 我是通過在服務器端更改數據模型以使其包含“ ProjectPhaseModel”來實現的，然后，客戶端上的鍵是在定義列以將下拉列映射到服務器模型上包含該類的屬性時下拉信息。 這是客戶端上的列信息：

           {
                title: "Project Phase",
                field: "ProjectPhase",
                editor: projectPhaseEditor,
                template: "#= ProjectPhase.ProjectPhase #"
            }

和服務器端模型：

public class ProjectNumberModel : BaseModel
{
    public ProjectPhaseModel ProjectPhase { get; set; }

    public string Number { get; set; }

    public bool Active { get; set; }

    public int ProjectId { get; set; }

    public ProjectNumberModel()
    {
        ProjectPhase = new ProjectPhaseModel();
    }
}

public class ProjectPhaseModel
{
    public int ProjectPhaseId { get; set; }
    public string ProjectPhase { get; set; }
}