Sunday, May 13, 2012

jqGrid highlight the new added row


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!


Source: Tips4all

2 comments:

  1. 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, "#myGrid").effect("highlight", {}, 2000);

    ReplyDelete
  2. 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.

    ReplyDelete