Highlight and autoscroll to newly added row

[moomooParticipant]

Hi,

I would like to highlight and autoscroll to the new row after adding it into jqxGrid
$("#myTbl").jqxGrid('addrow', null, row);

I check from api there is a way to autoscroll to specific row by having the row index.
How to get rowindex on newly added row?

$("#myTbl").jqxGrid('selectrow', index);
$("#myTbl").jqxGrid('ensurerowvisible', index);

Thx.

[Peter StoevKeymaster]

Hi moomoo,

I prepared a small sample which shows how this can be achieved. Please, look at: http://jsfiddle.net/jqwidgets/3a4FY/

 $("#addrowbutton").on('click', function () {
     var datarow = generatedata(1)[0];
     var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
     var rows = $("#jqxgrid").jqxGrid('getrows');
     var boundindex = $('#jqxgrid').jqxGrid('getrowboundindex', rows.length-1);
     $("#jqxgrid").jqxGrid('selectrow', boundindex);
     $("#jqxgrid").jqxGrid('ensurerowvisible', boundindex);   
 });

[moomooParticipant]

thx for your prompt reply.
it works as expected.

[mdiamondParticipant]

Note for anyone referring to this post. ensurerowvisible requires a visible index, that is, which row of the grid is displaying the data. The documentation currently says to pass the bound index, which is not right. (Reference: http://www.jqwidgets.com/community/topic/ensurerowvisible-should-accept-bound-index/)

The jsfiddle above does work, but only if the grid is not being sorted. You can see this by running it, clicking on a column header to sort, then add some rows with the button. The grid will not always scroll to the correct row.

I was able to work around this by calling getrows. This seems to return the list of rows in sorted order (not sure if that’s documented anywhere.) Then I searched that list to find where my new row ended up. That index could then be passed to ensurerowvisible.

[iamswainParticipant]

Hi, Peter Stoev, the jsfiddle you made http://jsfiddle.net/jqwidgets/3a4FY/ , it only works the first time when new item is added.

[prashantParticipant]

Hi Peter, thank you so much for your support.
I referred your fiddle: http://jsfiddle.net/jqwidgets/3a4FY/

I have tried to use the fiddle to add new rows at ‘last’& highlight it (using the last parameter as ‘last’).
var commit = $("#jqxgrid").jqxGrid('addrow', null, {}, 'last');

It works fine with the default sort order. But if I sort the grid (say with FirstName) then the new rows are not added at last index i.e at the bottom.
It would be very helpful if you could check this issue. http://jsfiddle.net/mx37q9ea/1/

Thanks.

[MartinParticipant]

Hello prashant,

Thank you for your example.
This is how it is expected to behave. When you add a new row in an unsorted grid it is added at the bottom. However,
if the grid is sorted by some column the sorting would be applied for the new row, too. Otherwise, adding it again at the bottom would break the sorting.

You can check this Example.

Best Regards,
Martin Yotov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts