JQGrid Source not populating after delete

Question

I am using a jqGrid that is set up in the $(document).ready like this:

jQuery("#list").jqGrid({
        datatype: 'json',
        colNames: ['ID', 'Note', 'Date Added'],
        colModel: [
            { name: 'ID', index: 'ID', width: 60, key: true },
            { name: 'ContactNote', index: 'ContactNote', width: 300, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } },
            { name: 'ContactDate', index: 'DateAdded', width: 100 }
        ],
        mtype: 'POST',
        viewrecords: true,
        jsonReader: { repeatitems: false },
        ignoreCase: true,
        height: 450,
        loadonce: false,
        onSelectRow: function (id) { $('#ContactId').val(id); }
    });

Here is the HTML of the page:

<div class="col-12">
<div class="ui-content-6 ui-widget-content ui-corner-all">
    @using (Html.BeginForm())
    {
        <h3 class="ui-widget-header ui-corner-all">Enter account number</h3>
        <div class="field-container">
            @Html.LabelFor(o => o.AccountNumber)
            @Html.TextBoxFor(o => o.AccountNumber)
        </div>

        <div class="form-submit">
            <button id="btnSearchContactItems">Get Contact Items</button>
        </div>

        <h3 class="ui-widget-header ui-corner-all">Contact item list</h3>

        <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>

        <div class="form-submit">
            <button id="btnRemoveContactItem" type="submit">Remove Selected Contact Item</button>
        </div>

        @Html.HiddenFor(o => o.ContactId)

        @Html.ValidationSummary()
    }
</div>

The btnSearchContactItems button has a click event:

$("#btnSearchContactItems").click(function () {

        $("#list")
            .jqGrid('setGridParam', { postData: { accountNumber: $('#AccountNumber').val() }, url: baseSearchURL })
            .trigger('reloadGrid');

        return false;
    });

Here is the issue:

I am having the user enter in their account number and, on the btnSearchContactItems button click, fill in the grid with some notes. When one of the notes is selected and the btnRemoveContactItem button is clicked the action is called and the note is removed. The problem is that once the not is removed the grid empties. What I would like to happen is to have the grid reload with the data minus the row that was removed.

I swear, for the life of me, I cannot get the data to repopulate. I have tried firing the button click in the grid load, on page load, ect and still nothing. It will only fill the grid again if I physically click the button. Anyone have any thoughts?

score 0 · Answer 1 · edited May 23 '17 at 12:27

How I suppose you don't want to sent any request to the server at the page start. To do this you can use datatype: "local" if you create the grid. You can set url: baseSearchURL at the time of creating of the grid. The parameter will be ignored with datatype: "local".

Now I go back to you main question: you can define postData option directly at the creating of the grid, but you should use functions (methods) as properties (see the answer for details):

postData: {
    accountNumber: function () {
        var account = $('#AccountNumber').val();
        return account ? account : null;
    }
}

The method accountNumber will be called every time if grid will be reloaded. So you can use

$("#btnSearchContactItems").click(function () {
    $("#list").jqGrid('setGridParam', { datatype: "json" }}).trigger('reloadGrid');
    return false;
});

If you want you can additionally set inside of click handler datatype: "local" if $('#AccountNumber').val() is empty.

If you really don't want to send any accountNumber property to the server it the value is null or "" you can use serializeGridData in the following form

serializeGridData: function (postData) {
    var propertyName, propertyValue, dataToSend = {}, val;
    for (propertyName in postData) {
        if (postData.hasOwnProperty(propertyName)) {
            propertyValue = postData[propertyName];
            val = $.isFunction(propertyValue) ? propertyValue() : propertyValue;
            if (propertyName !== "accountNumber" || val) {
                // don't send "accountNumber" with empty value
                dataToSend[propertyName] = val;
            }
        }
    }
    return dataToSend; // ?? probably you can use JSON.stringify(dataToSend);
}

(see the answer for details)

Additionally I would recommend you to set gridview: true to improve performance of the grid and add rowNum: 10000. jqGrid is designed to display paged data. You don't use pager option, but the default value of rowNum is 20. So without setting rowNum: 10000 jqGrid will display only the first 20 rows of data. It's not what you want.

JQGrid Source not populating after delete

1 Answers1