C# 编辑事件时网格中的剑道UI web下拉列表
我已经使用了Kendo UI Web网格,当我在网格中编辑记录时,我有一个下拉列表来选择值。我似乎无法解决的问题是,当单击编辑按钮时,如何将下拉列表的值设置为编辑之前表格(网格)中的值 我在下面有我的代码,我已经尝试过了,每次当我把它右键放到控制台时,它都显示为空白C# 编辑事件时网格中的剑道UI web下拉列表,c#,jquery,kendo-ui,kendo-grid,C#,Jquery,Kendo Ui,Kendo Grid,我已经使用了Kendo UI Web网格,当我在网格中编辑记录时,我有一个下拉列表来选择值。我似乎无法解决的问题是,当单击编辑按钮时,如何将下拉列表的值设置为编辑之前表格(网格)中的值 我在下面有我的代码,我已经尝试过了,每次当我把它右键放到控制台时,它都显示为空白 $("#project-numbers-grid").kendoGrid({ dataSource: { transport: { read: {
$("#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: " ",
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"
}
}
}
});
}
编辑:
我做了以下更改,但没有成功
$("#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"
}
}
}
});
}
问题是e.model上没有ProjectPhaseId。有一个e.model.Id,但该Id是数据库中的projectnumber实体之一,而不是项目阶段的Id。我成功地选择了表中的值。为此,我在服务器端更改了数据模型以包含“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; }
}
{
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; }
}