javascript - jqGrid, how to add a row in any position inside the grid via modal form?

Question

Is there any way to do that? I use jqGrid form editing feature to populate my grid. But jqGrid only permits to add a row on top or bottom position inside the grid. What I want to do is be able to previously select the desired position on the grid (by clicking in any existing row) and then add a row above or below that selected row.

Sorry for my poor english. Thanks in advance.

Answer 1

What you need is possible and is not so complex. Look at the very old demo from the answer. If you have the column with name: 'myColName', and you want to insert any information in the edit or add form after the information about the column, you can just inset the row of data inside. The form contain <table>. So you should insert the <tr> having one or two child <td> elements (the cell for the label and the cell for the data). To be conform with other data in the form you should use class="FormData" for the <tr> element. The first <td> element (in the column for the labels) should has class="CaptionTD ui-widget-content" and the second <td> element (in the column for the data for the input of modification) should has class="DataTD ui-widget-content":

{ // edit options
    recreateForm: true,
    beforeShowForm: function ($form) {
        var $formRow = $form.find('#tr_Name'); // 'Name' in the column name
                        // after which you want insert the information
        $('<tr class="FormData"><td class="CaptionTD ui-widget-content">' +
             '<b>Label:</b>' + // in the line can be any custom HTML code
             '</td><td class="DataTD ui-widget-content">' +
             '<span></span>' + // in the line can be any custom HTML code
             '</td></tr>').insertAfter($formRow);
    }
}

UPDATED: OK, now I understand what you want. The problem is that addRowData will be called for adding of new row with the option addedrow of editGridRow. So if you use reloadAfterSubmit: false option you can add the new row either as 'first' or as the 'last' in the grid. To be able to use 'after' or 'before' parameter of addRowData the method addRowData must be called with one more parameter which specify the id of the row before which (or after which) the new row will be inserted.

At the first look it seems that only with respect of modification of the source code of jqGrid your requirement can be implemented. In reality you can do implement your requirements with very small code and without modification of the source code of jqGrid. I suggest the following:

You can save the pointer to the original implementation of addRowData in a variable and overwrite it with your implementation:

var oldAddRowData = $.fn.jqGrid.addRowData;
$.jgrid.extend({
    addRowData: function (rowid, rdata, pos, src) {
        if (pos === 'afterSelected' || pos === 'beforeSelected') {
            if (typeof src === 'undefined' && this[0].p.selrow !== null) {
                src = this[0].p.selrow;
                pos = (pos === 'afterSelected') ? 'after' : 'before';
            } else {
                pos = (pos === 'afterSelected') ? 'last' : 'first';
            }
        }
        return oldAddRowData.call(this, rowid, rdata, pos, src);
    }
});

The code above introduce two new options of addRowData: 'afterSelected' and 'beforeSelected'. If you include the code before creating of jqGrid the grid will be created using your custom addRowData, so you can use new addedrow: 'afterSelected' or addedrow: 'beforeSelected' as the options of Add form.

The demo shows live that the suggestion work. You should don't look at many other code of the demo. The current implementation of form editing don't support local editing, but in I used in the demo just old code which do this. So the total code of the demo is relatively long, but the part which I want to demonstrate you can easy find inside.