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,
Hello ,
how about scrolling with Visualization feature ( https://www.igniteui.com/grid/virtualization-continuous )
with virtualization, table only render 1,000 records . so the "find("tr[data-id='<primary key value>']").first().position().top" will not work if data list have more than 1000 rows .
we used find index and re-calculated by index * row height , but when user use sort , the index in grid was changed