Grid undefined after submit of Ajax.BeginForm

2 posts, 0 answers
  1. KEITA
    KEITA avatar
    1 posts
    Member since:
    Oct 2015

    Posted 14 Mar 2016 Link to this post

    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:
    .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
    .Read(r => r.Action("GetUserListForDataSource", "CustomerMaintenance").Data("getSelectedDataSourceId"))

    Third Grid:
    .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
    .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);


    Document Ready Function:
    $(document).ready(function () {
    userCustomerListGrid = $("#userCustomerListGrid").data("kendoGrid");
    selectedUserCustomerListGrid = $("#selectedUserCustomerListGrid").data("kendoGrid");
    $('#DataSourceId').change(function () {;[]);;


    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.

  2. Daniel
    Daniel avatar
    2231 posts

    Posted 17 Mar 2016 Link to this post


    Could you check if there are any JavaScript errors? A possible reason for the problem is that the functions specified for the grids event handlers and used in the template are defined after the helper. In this case when the content is dynamically appended to the page, the functions will not be defined yet when the grids are being initialized and JavaScript error will be thrown that will prevent the initialization.

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top