[英]C# Selenium Web Driver with Kendo UI: How to wait for the kendo drop down list is fully populated
[英]Kendo UI web drop down list in grid on edit event
我使用了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: " ",
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。
我能够成功选择表中存在的值。 我是通过在服务器端更改数据模型以使其包含“ 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; }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.