Question

I’m using jqgrid with MVC 3.

I have this pages whose code is shown below:

@model VectorCheck.ViewModels.InsertUpdateInvoiceViewModel
@{
    ViewBag.Title = "Edit Invoice " + @Model.Invoice.InvoiceNumber;
    ViewBag.InvoiceId = (int)@Model.Invoice.InvoiceId;
}
<header class="controllerheader">
    <h1>Edit Invoice @Model.Invoice.InvoiceNumber</h1>
</header>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/EditorHookup.js")" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" media="screen" href="../../Scripts/jquery.jqGrid-4.1.1/css/ui.jqgrid.css" />

<script src="../../Scripts/jquery.jqGrid-4.1.1/js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script src="../../Scripts/jquery.jqGrid-4.1.1/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script src="../../Scripts/Views/Invoice/create.js" type="text/javascript"></script>

<script src="../../Scripts/Views/Invoice/edit.js" type="text/javascript"></script>
@using (Html.BeginForm()) {
    @Html.ValidationSummary()
    <input type="hidden" id="invoiceid" value="@Model.Invoice.InvoiceId" />
    <input type="hidden" id="organisationid" value="@Model.Invoice.OrganisationId" />
    <fieldset>
        <legend>Invoice</legend>
            @Html.HiddenFor(model => model.Invoice.InvoiceId)
@Html.HiddenFor(model => model.Invoice.InvoiceAttachmentId)
@Html.HiddenFor(model => model.Invoice.CreatedByUserName)
@Html.HiddenFor(model => model.Invoice.CreatedDateTime)
@Html.HiddenFor(model => model.Invoice.ProgramManagerId, new { @id = "programmanagerid"})
<div class="columnRightCreate editor-label">
    @Html.LabelFor(model => model.Invoice.AreaId)
</div>
<div class="dataRightCreate editor-field">
    @Html.DropDownListFor(model => model.Invoice.AreaId, Model.AreaList, new { @id = "areaddl" }, Model.Invoice.ActiveInvoiceLines.Count() == 0)
    @Html.ValidationMessageFor(model => model.Invoice.AreaId, "!")
</div>
<div class="invoiceHeaderCreate">
    <div class="columnLeftCreate editor-label">
        @Html.LabelFor(model => model.Invoice.OrganisationId)
    </div>
    <div class="dataLeftCreate editor-field">
        @Html.DropDownListFor(model => model.Invoice.OrganisationId, Model.OrganisationList, new { @id = "organisationddl" })
        @Html.ValidationMessageFor(model => model.Invoice.OrganisationId, "!")
    </div>
    <div class="columnLeftCreate editor-label">
        @Html.LabelFor(model => model.Invoice.InvoiceNumber)
    </div>
    <div class="dateLeftCreate editor-field">
        @Html.EditorFor(model => model.Invoice.InvoiceNumber)
        @Html.ValidationMessageFor(model => model.Invoice.InvoiceNumber, "!")
    </div>
    <div class="columnLeftCreate editor-label">
        @Html.LabelFor(model => model.Invoice.InvoiceDate)
    </div>
    <div class="dataLeftCreate editor-field" id="datepicker">
        @Html.EditorFor(model => model.Invoice.InvoiceDate)
        @Html.ValidationMessageFor(model => model.Invoice.InvoiceDate, "!")
    </div>
    <div class="columnRightCreate editor-label">
        @Html.LabelFor(model => model.Invoice.TotalExcludingGst)
    </div>
    <div class="dataRightCreate editor-field">
        @Html.EditorFor(model => model.Invoice.TotalExcludingGst)
        @Html.ValidationMessageFor(model => model.Invoice.TotalExcludingGst, "!")
    </div>
    <div class="columnRightCreate editor-label">
        @Html.LabelFor(model => model.Invoice.TotalIncludingGst)
    </div>
    <div class="dataRightCreate editor-field">
        @Html.EditorFor(model => model.Invoice.TotalIncludingGst)
        @Html.ValidationMessageFor(model => model.Invoice.TotalIncludingGst, "!")
    </div>
    <div class="columnRightCreate editor-label">
        @Html.LabelFor(model => model.Invoice.AllowMoreThanAllowedPercentageToBePaidOverride)
        @Html.CheckBoxFor(model => model.Invoice.AllowMoreThanAllowedPercentageToBePaidOverride)
    </div>
    <div class="columnRightCreate editor-label">
        @Html.LabelFor(model => model.Invoice.AllowNumberOfProgressPaymentsOverride)
        @Html.CheckBoxFor(model => model.Invoice.AllowNumberOfProgressPaymentsOverride)
    </div>
    @if (Model.Invoice.ApprovedForPayment == false) {
        <div class="columnRightCreate editor-label">
            @Html.LabelFor(model => model.Invoice.Rejected)
            @Html.CheckBoxFor(model => model.Invoice.Rejected)
        </div>
    }
</div>

<input type="submit" value="Update" />
    </fieldset>
    <fieldset>
        <legend>Invoice Lines</legend>
        <table id="list">
        </table>
        <div id="pager">
        </div>
    </fieldset>
}

This deals with and invoice and its associated invoicelines. so the first part is basic MVC update on the invoice details. There are textboxes, selects etc and you press the update button to send the details back to be saved. This works fine if all you do it alter the invoice details.

However bellow that the table with id list is a jqgrid containing invoice lines. The code is:

$("#list").jqGrid({
        url: '/InvoiceLine/GridData/' + invoiceId,
        datatype: 'json',
        mtype: 'POST',
        colNames: ['InvoiceLineId', 'InvoiceId', 'Project', 'Amount', 'CreatedByUserName', 'CreatedDateTime', ''],
        colModel: [

              { name: 'InvoiceLineId', index: 'InvoiceLineId', hidden: true, key: true, editable: true, editrules: { required: false} },
              { name: 'InvoiceId', index: 'InvoiceId', hidden: true, editable: true, editrules: { required: false }, editoptions: { defaultValue: invoiceId} },
              { name: 'Project', index: 'Project' },
              { name: 'Amount', index: 'Amount', width: 150, align: 'right', formatter: 'number', formatoptions: { thousandsSeparator: "," }, editable: true, editrules: { required: true, custom: true, custom_func: iscurrencycheck} },
              { name: 'CreatedByUserName', index: 'CreatedByUserName', hidden: true, editable: true, editrules: { required: false} },
              { name: 'CreatedDateTime', index: 'CreatedDateTime', hidden: true, editable: true, editrules: { required: false} },
              { name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions',
                  formatoptions: { keys: true,
                      delbutton: false,
                      //Reload grid so that the price group gets updated after a save
                      onSuccess: function (rowid) { reload(); }
                  }
              }
              ],
        pager: $('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        viewrecords: true,
        imgpath: '',
        caption: 'Invoice Lines',
        editurl: '/InvoiceLine/Save/',
        grouping: true,
        groupingView: {
            groupColumnShow: false,
            groupField: ['Project']
        }
    });
    $("#list").navGrid('#pager', { edit: false, add: true, del: true, search: false }, {  }, { width: 500 }, { url: "/../InvoiceLine/Delete" });
});

This does the updates well etc. The problem is it causes problems with the MVC update. If you open the create invoice line dialog and then after closing it click the update button to save the invoice details a jquery validate error is thrown.

d is undefined
[Break On This Error]

….data(a.form,”validator”).settings.meta;return b?c(a).metadata()[b]:c(a).metadat…

I had a look at the source and I’m pretty sure this is because one you open the dialog for create it contains a form tag and even after you close it this remains on the page though disabled.

Anyone know how to deal with this? Maybe how to get rid of the markup created by the dialog before the update button is pressed?

Answer 1

I suppose that the described problem exists because you placed <table id="list"></table><div id="pager"></div> inside of @using (Html.BeginForm()) {...}. In the grid you use the same column names as in the grid. So you get conflicts in the name of main form and the names in Add form of jqGrid.

I would recommend you to move <table id="list"></table><div id="pager"></div> outinside of @using (Html.BeginForm()) {...}.

As another workaround you can try to destroy edit form after closing. The default behavior of jqGrid is hiding the form only. Even the setting recreateForm: true helps here not because it deletes the previously hidden grid only at the beginning of opening of the form next time. So I suggest that you useonClose which destroy edit/add form directly on closing. The following code can be used somewhere before call of navGrid:

$.extend($.jgrid.edit, {
    onClose: function () {
        setTimeout(function() {
            $("#editmodlist").remove(); // "list" part is the id of the grid
        }, 100);
    }
});