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; }
}

在编辑事件的网格中的Kendo UI web下拉列表

1 个答案: