I have a form of 3 grids. One is an editable (Incell) form, one is a standard grid with ajax data binding, and the last one is a grid that has a droppable area from which rows from the second grid are dropped from. After form submission, the first grid works fine, but the other two fail - the drag/drop stops working and the ajax data binding fails as well. It appears that after the form is being replaced (InsertionMode = InsertionMode.Replace), the grid is not recognized in the document.ready javascript function.
Ajax Form syntax:
@using (Ajax.BeginForm("AddCustomer","CustomerMaintenance", new AjaxOptions()
{
HttpMethod = "Post",
UpdateTargetId = "modal-content",
OnSuccess = "OnCustomerAddSuccess",
OnFailure = "OnCustomerAddFailure",
OnBegin = "return CompileStuff();",
OnComplete = "$('.modal-dialog').hideLoading();",
InsertionMode = InsertionMode.Replace
}, new {@id = "AddCustomerForm"}))
Second grid:
@(Html.Kendo().Grid<UserCustomerItem>()
.Name("userCustomerListGrid")
.Scrollable(scoll => scoll.Enabled(true))
.HtmlAttributes(new { style = "height:100%;" })
.Columns(columns =>
{
columns.Bound(uc => uc.UserId).Hidden(true);
columns.Bound(uc => uc.FullName);
})
.DataSource(ds => ds
.Ajax()
.PageSize(100)
.Read(r => r.Action("GetUserListForDataSource", "CustomerMaintenance").Data("getSelectedDataSourceId"))
)
)
Third Grid:
@(Html.Kendo().Grid(Model.ExplicitUserCustomerItemList)
.Name("selectedUserCustomerListGrid")
.Scrollable(scoll => scoll.Enabled(true))
.HtmlAttributes(new { style = "height:100%;" })
.Columns(columns =>
{
columns.Bound(uc => uc.UserId).Hidden(true).ClientTemplate("<input type='hidden' name='ExplicitUserCustomerItemList[#=getUserCustomerIndex(data)#].UserId' value='#=UserId#' />");
columns.Bound(uc => uc.FullName).ClientTemplate("<input type='hidden' name='ExplicitUserCustomerItemList[#=getUserCustomerIndex(data)#].FirstName' value='#=FirstName#' /> " +
"<input type='hidden' name='ExplicitUserCustomerItemList[#=getUserCustomerIndex(data)#].LastName' value='#=LastName#' />" +
"#=FullName#"); ;
columns.Command(command => command.Destroy()).Width(100);
})
.Events(e => e.Remove("onRemoveSelectedUserCustomer"))
.DataSource(ds => ds
.Ajax()
.Destroy("DestroyDummy", "CustomerMaintenance")
.Model(model =>
{
model.Id(p => p.UserId);
model.Field(p => p.FirstName);
model.Field(p => p.LastName);
model.Field(p => p.FullName);
})
.ServerOperation(false)
)
)
Document Ready Function:
$(document).ready(function () {
userCustomerListGrid = $("#userCustomerListGrid").data("kendoGrid");
selectedUserCustomerListGrid = $("#selectedUserCustomerListGrid").data("kendoGrid");
$('#DataSourceId').change(function () {
userCustomerListGrid.dataSource.read();
selectedUserCustomerListGrid.dataSource.data([]);
selectedUserCustomerListGrid.dataSource.read();
....
}
}
Per another forum post, I made the userCustomerListGrid and the selectedUserCustomerListGrid global vars.
After form submission (inconsistent but most of the time), those two variables are undefined.
Do you know why this would be?
Thanks in advance.