Kendo Grid MVC / ASP.Net在编辑期间禁用字段

时间:2016-10-14 09:26:26

标签: javascript asp.net asp.net-mvc kendo-ui kendo-grid

我有一个带有各种下拉菜单的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>

0 个答案:

没有答案