我有一个带有各种下拉菜单的Kendo UI网格。特别是两列是Schema和Mapping。 Schema下拉列表有多种选项供用户选择,其中一个选项是" Custom"。在这种情况下,我希望启用Mapping列,以便用户可以选择自定义映射。如果选择Schema列作为其他任何内容,则Mapping列必须为null并且已禁用。
我努力让这项功能按预期工作。如果我将Events侦听器添加到模型中,我可以按照我的意愿触发javascript函数,但是我似乎无法找到启用或禁用后的属性。如果我将事件订阅到网格本身,我可以找到属性,但Events.Change()仅在行完成编辑后触发,并且用户已经点击"更新"。
我需要这个动态工作。因此,用户编辑该行,对Schema进行更改,并根据选择的内容,映射下拉列表启用强制输入或禁用,并在运行中为空。
这是我到目前为止的地方。首先是网格代码:
@(Html.Kendo().Grid<JobDetailsViewModel>()
.Name("Grid")
.NoRecords("No job details")
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Columns(columns =>
{
columns.Command(c => { c.Edit().Text("Edit Details"); c.Destroy().Text("Remove"); });
columns.ForeignKey(c => c.CustomerId, (System.Collections.IEnumerable)ViewData["CustomersDropDown"], "Id", "Name").Title("Customer");
columns.ForeignKey(c => c.Schema, EnumHelper.GetSelectList(typeof(Schema)).ToList(), "Value", "Text");
columns.ForeignKey(c => c.MappingId, (System.Collections.IEnumerable)ViewData["MappingsDropDown"], "Id", "DisplayTitle").Title("Mapping");
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => {
model.Id(o => o.Id);
model.Field(o => o.Id).Editable(false).DefaultValue(Guid.Empty);
model.Field(o => o.JobId).DefaultValue(Model.SelectedJobId);
model.Field(f => f.Customer).Editable(true).DefaultValue(ViewData["defaultCustomersDropDown"] as JobCustomerViewModel);
model.Field(f => f.Mapping).Editable(true).DefaultValue(ViewData["defaultMappingsDropDown"] as JobMappingViewModel);
})
.Create(create => create.Action("AddJobDetail", "Admin").Type(HttpVerbs.Post))
.Read(read => read.Action("ReadJobDetails", "Admin").Type(HttpVerbs.Post))
.Update(update => update.Action("EditJobDetail", "Admin").Type(HttpVerbs.Post))
.Destroy(destroy => destroy.Action("DeleteJobDetail", "Admin").Type(HttpVerbs.Post))
// .Events(events => events.Change("rowEdit"))
)
.HtmlAttributes(new { style = "display:table; width:100%; height: 100%;" })
.Events(change => change.Edit("rowEdit"))
.Pageable()
)
...而我的Javascript,其中大部分是由于我弄乱了它而被禁用。但它可能会让你想到我到目前为止所尝试的内容......
<script type="text/javascript">
function rowEdit(e) {
console.log("Hi there");
console.log(e);
if (e.action == "itemchange" && e.field == "ImportSchema") {
var grid = $('#Grid').data('kendoGrid');
console.log(grid);
if (e.items[0].ImportSchema != 4) {
e.items[0].ImportMappingId = 0;
e.items[0].ImportMapping = null;
//grid.data[0].field.ImportMappingId.closeCell();
// e.items[0].ImportMappingId HOW TO DISABLE?
console.log("Should be disabled");
}
else {
console.log("Should be enabled");
// e.items[0].ImportMappingId HOW TO ENABLE AND MAKE MANDATORY?
}
}
}
</script>