0

我使用了 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。

4

1 回答 1

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; }
}
于 2013-10-04T19:11:48.960 回答