jqGrid: update a row AND have its formatters updated as well

Question

Ideally I would call setRowData and have my cell formatters and rowattr function re-run, but cell formatters and rowattr functions don't re-run when calling setRowData (I don't know why but that's another question maybe), so setRowData isn't really helpful for me.

It seems the next easiest thing to do would be to remove a row and re-add a new one at the same position with the same model. To do that I need to get the rowid of the row above the selected row so that I can call addRowData and specify the ID of the row above in srcrowid and use 'after' for the position. This is what I'm thinking:

$.jgrid.extend({
    updateRow: function(rowid, model){
        // get index from id
        var index = this.jqGrid('getInd', rowid);

        // note: my first row's index is 1 (is that normal?)
        if ( index == 1 ){
            position = 'first';
            srcrowid = 'n/a';
        }
        else{
            position = 'after';
            srcrowid = _____ how to get rowid of row above selected row _____???
        }

        // delete row
        this.jqGrid('delRowData', rowid);

        // insert at index
        this.jqGrid('addRowData', rowid, model.attributes, position, srcrowid);
    }
});

How can I get the rowid of the row above the selected row? (Is there an easier way? Is this a bad strategy?)

Note: I'm using backbone.js collections and models

Answer 1

I find the best way to change the row is to use setRowData instead of usage delRowData and addRowData. If you know rowid then you can use $("#" + rowid); (or if rowis have special characters like :, . an so on then $("#" + $.jgrid.jqID(rowid));) to get the <tr> element. Then you can use jQuery.addClass, jQuery.css, jQuery.attr to change the attributes of the row.

It's important to understand that jqGrid uses the same methods internally it it's required to modify element of the grid. The main goal of rowattr is another one. During filling of the grid data there are many scenarios. One can create DOM elements for <td> and <td> and insert there in the grid. The main problem is performance in case of working with DOM. It's much slowly as building of strings. Moreover DOM is even much more slowly if the elements are exist on the the HTML page (in opposite to disconnected elements). If one modify one element only from the grid having 500 rows then the position of elements of all other rows need be recalculated.

Because of the problem jqGrid construct the whole body of the grid first in string format and then assign all <tr> and <td> elements using one set of innerHTML. It improves dramatically the performance of filling of the grid. See the answer for additional information. The formatters and callbacks cellattr and rowattr are introduced to allow to customize cell and row attributes during building of grid body in string format. It gives you customization possibilities without reducing of performance.

On the other side if you need to modify the row which are attached already on HTML page then you will have no advantage with working with strings instead of DOM. Because of that I recommend you just use jQuery.addClass, jQuery.css, jQuery.attr directly. If you need to change multiple classes, assign multiple css rules or multiple attributes then you should use one call of above functions. You can use object form of jQuery.css, jQuery.attr for it.

Answer 2

The updateRow extension below works, BUT I ended up not using it. Not so much for the reasons Oleg talked about (which I assume are valid and something you should definitely consider), but because I had a filter provider that was too difficult to sync with (e.g. after soft deleting a row, I need to now determine if new deleted status agrees with current filter...and that's a pretty simple example). So I just defer to the data the filter provider gives me and repopulate the grid each time, which I'm not fond of, but I don't see other easy options.

As far as the extension below goes, here are pros/cons as I see them:

Pros:

• easy to use
• You just rely on the rowattr functions and cell formatters you already defined. You don't have to write those twice.

Cons:

• possibly performance--see Oleg's answer
• please add any you see

Unknowns:

• performance? I have no idea how much worse it performs. It would be interesting to do benchmarks with different browsers. I saw no problems, but I only have maybe 20 rows. Let's say we're working with 500 rows and adding/removing classes and calling .css() took 30 ms but using the extension took 300 ms on a 'typical' machine/browser. That would be 10 times slower, but for me it would probably be worth it because I don't have to write something twice.

here's the extension:

$.jgrid.extend({
    updateRow: function(rowid, data){
        // get index from id
        var index = this.jqGrid('getInd', rowid);

        // note: my first row's index is 1 (is that normal?)
        if ( index == 1 ){
            position = 'first';
        }
        else{
            position = 'after';
            srcrowid = $(this).find('tr#' + rowid).prev()[0].id;
        }

        // delete row
        this.jqGrid('delRowData', rowid);

        // insert at index
        this.jqGrid('addRowData', rowid, data, position, srcrowid);
    }
});