Kendo Grid MVC/ASP.Net Disable a field during edit
I have a Kendo UI grid with various dropdowns. Two columns in particular are Schema and Mapping. The Schema dropdown has a variety of options the user can choose, one of which is "Custom". In this case, I want the Mapping column to be enabled so the user can choose a custom mapping. If the Schema column is selected as anything else, the Mapping column needs to be null'd and disabled.
I'm struggling to get this functionality to work as intended. If I add the Events listener into the model, I can trigger the javascript function as I would like, however I cannot seem to find the properties I'm after to enable or disable. If I subscribe Events to the grid itself, I can find the properties, but Events.Change() only triggers AFTER the row is finished editing and the user has hit "Update".
I need this to work dynamically. So user edits the row, makes a change to Schema and depending on what's selected, the Mapping dropdown is either enabled with mandatory entry or disabled and nulled on the fly.
Here is where I am so far. First the grid code:
@(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()
)
... And my Javascript, most of which is disabled due to me messing about with it. But it may give you and idea about what I'm trying so far...
<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>