Hi,
Is it possible to scroll igGrid to specific row by JavaScript ?
Thanks,
Ed
yes it is possible. I hope this snippet works for you:
$("#grid1_scroll").scrollTop($("#grid1").find("tr > td:contains('323')").first().position().top);
it will scroll to the row where the first TD text has "323" in it. Similarly, you can use other selectors. if you have primaryKey set in the grid, it is even more straightforward:
$("#grid1_scroll").scrollTop($("#grid1").find("tr[data-id='<primary key value>']").first().position().top);
We plan to add this to the grid API in the future. Hope it helps. Thanks,
Angel
Angel,
Thanks for the answer. I have additional questions:
1. Do you mean $("#grid1").igGrid("scrollContainer") instead of $("#grid1_scroll") ?
2. I don't see igGrid find() method in docs. Is it undocumented ?
3. I can use $("#grid1").igGrid("findRecordByKey", "key value") in second case, correct ?
Another question - will this feature be added to next release ?
1. No, I mean $("#grid1_scroll"). That's the ID of the scroll container. The grid has it so that it can show scrollbars and render complex layouts
2. This isn't part of the igGrid API, it's part of jQuery:
http://api.jquery.com/find/
3. yes
Hope it helps. Thanks
Sorry, it does not work for me. I have primaryKey: "timestamp" set and when I try to scroll to row if it's necessary:
var searchStr = "tr[timestamp='" + strTime + "']";
$("#grid1_scroll").scrollTop($("#grid1").find(searchStr).first().position().top)
I receive an error message: Microsoft JScript runtime error: Unable to get value of the property 'top': object is null or undefined
In debugger I see that $("#grid1").find(searchStr).first().position() is null...
Hey,
as i have pointed out in a previous post, the primary key is encoded in every TR, in a data-id attribute. it doesn't matter how the property holding the primary key is named, it is not used as an attribute. all HTML attributes are prefixed with data-* in order to be W3C compliant.
instead of:
$("#grid1_scroll").scrollTop($("#grid1").find("tr[timestamp='<primary key value>']").first().position().top);
Hope it helps. Thanks,
Thanks, scrolling does work! However how can I find that specific record is outside the visible part of the grid and I really need to scroll the grid to select it ? If the record is visible, I can just select it, something like:
$('#grid1').igGridSelection('selectRow', i);
Now when I scroll to the visible record, grid first scrolls to it and the record became top record of the visible grid, then it scrolls back, record jumps to the previous place and became selected.
Have you solved this?
It would be really nice if the $('#grid1').igGridSelection('selectRow', i) would automatically scroll the new selected row into the visible area.