Hi,
I am attempting to set the initial value of an input control inside the Popup editor by using a hierarchical grid's Edit event. The popup displays correctly, but the MVVM binding is not updating the model. This is the case for any of the input controls i try to set the value of. However, if i manually (non-programmatically) change the input value, the model is successfully updated. I have also tried to use the .data("").trigger("change") method to fire off the change event of the input control to no avail. I have tried setting the value on several other controls (not just a dropdownlist) and the result is the same-the display text is shown correctly but the value is not updated in the model. Any ideas on how to update the model?
Below is the Grid Helper, Javascript function, and Editor Template. Attached is a screenshot of the form data; notice how CourseID is set to 0 (CourseID is non-nullable).
MVC Grid Helper:
<script id="childTemplate" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=CourseID#")
.SelectedIndex(0)
.Animation(a => a.Open(o => o.Fade(FadeDirection.In)))
.Items(i =>
{
i.Add().Text("Classes").Content(@<text>
@(Html.Kendo().Grid<LMS_Web_MVC.Models.ClassFull>()
.Name("grid_#=CourseID#")
.ToolBar(t => t.Create().Text("Add Class"))
.Columns(columns =>
{
columns.Bound(o => o.ClassID);
columns.Bound(o => o.BeginDate).Format("{0:yyyy-MM-dd HH:mm}");
columns.Bound(o => o.EndDate).Format("{0:yyyy-MM-dd HH:mm}");
columns.Bound(o => o.Enrollees);
columns.Bound(o => o.Active);
columns.Command(c => { c.Edit(); }).Title("Actions");
})
.Editable(e => e.Mode(GridEditMode.PopUp).Window(w => w.Width(600)).TemplateName("ClassEditor"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("Get_ClassesByCourse", "Class", new { courseID = "#=CourseID#" }))
.Update(u => u.Action("SaveClass", "Class"))
.Create(c => c.Action("SaveClass", "Class"))
.Model(m => { m.Id(c => c.ClassID); m.Field(c => c.Active).DefaultValue(true);
})
)
.Events(ev => ev.Edit("onEdit"))
.Pageable()
.Sortable()
.ToClientTemplate())
</text>);
}
).ToClientTemplate())
</script>
Javascript Function
<script>
function onEdit(e) {
if (e.model.ClassID == null) {
var courseGrid = $("#grid").data("kendoGrid");
var parentRow = courseGrid.dataItem(this.wrapper.closest("tr").prev());
var id = parentRow.CourseID;
$("#CourseID").data("kendoDropDownList").value(id);
$("#CourseID").data("kendoDropDownList").trigger("change");
}
</script>
Editor Template
@model LMS_Web_MVC.Models.ClassFull
<div data-container-for="CourseID" class="k-edit-field">
@Html.Kendo().DropDownListFor(model => model.CourseID).OptionLabel("Choose Course").Filter(FilterType.Contains).HtmlAttributes(new { style = "width:400px" }).DataTextField("CourseTitle").DataValueField("CourseID").ValuePrimitive(true).DataSource(ds => {
ds.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.PageSize(100)
.Type("aspnetmvc-ajax")
.Transport(t =>
{
t.Read("Get_SimpleCourseList", "Course", new { filterActive = false });
})
.Schema(s =>
{
s.Data("Data").Total("Total");
});
}).Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
</div>