jqGrid highlight the new added row

Question

Is that possible to highlight the new added row in jqGrid. The highlight effect is something like this http://docs.jquery.com/UI/Effects/Highlight

So, when the new row is added, the row will be highlighted, that will make clear for user which record is the new one.

Many thanks!

Answer 1

What information do you allready have about the row.

Do you have the row id? Or the value of the field that is marked as the key?

It creates the row as defined like this. Notice that the id of the row is the same as the key value.

<TR id=11 class="ui-widget-content jqgrow ui-row-ltr ui-state-highlight" role=row aria-selected=true><TD title=11 role=gridcell aria-describedby=list2_id>11</TD><TD title=2007-10-06 role=gridcell aria-describedby=list2_invdate>2007-10-06</TD><TD title="Client 1" role=gridcell aria-describedby=list2_name>Client 1</TD><TD style="TEXT-ALIGN: right" title=600.00 role=gridcell aria-describedby=list2_amount>600.00</TD><TD style="TEXT-ALIGN: right" title=120.00 role=gridcell aria-describedby=list2_tax>120.00</TD><TD style="TEXT-ALIGN: right" title=720.00 role=gridcell aria-describedby=list2_total>720.00</TD><TD title="" role=gridcell aria-describedby=list2_note>&nbsp;</TD></TR>

So then you could just do.

$("#tblselector).find("#+KeyValue").addClass("ui-state-highlight")

It realy depends on how the row is being added. You could use the afterInsertRow event but this would fire for each row as it is added to the grid. In addition there is this note on the event.

Note: this event does not fire if gridview option is set to true

I do not suggest changing the gridview option to false if you are returning a lot of rows and or columns as it will have a big performance impact.

I would have asked for clarification on how the row is being added but dont have enough points for comments.

Answer 2

Yes, I have used the following to briefly highlight a newly-added row. It produces a nice effect to let the user know there is new data, and sounds just like what you are looking for:

jQuery("#" + rowId).effect("highlight", {}, 2000);

Answer 3

If I understand you correct you want highlight a row added with respect of form editing ("+" in the navigation bar). Form editing supports an event afterComplete, which you can use to add some post-edditing features. For example, if you want to have the highlight effect with all rows added, then you can use general setting for jQuery.jgrid.edit:

jQuery.extend(jQuery.jgrid.edit, {
    afterComplete : function (response, postdata, formid) {
        if (postdata.oper === "add") { // highlight on "add" only
            var row = jQuery ("#"+$.jgrid.jqID(postdata.id), jQuery(this.gbox));
            row.effect("highlight", {color:"red"}, 3000);
        }
    }
});

If you will be use row.effect("highlight", {}, 3000); (no red color), you will see highlight effect, but a little not so clear, because added row will be selected per default.

You can of cause modify the code to use highlighting only for one selected grid.