Scrolling in igGrid

Hi,

Is it possible to scroll igGrid to specific row by JavaScript ?

Thanks,

Ed

Hi,

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 ?

Thanks,

Ed

Hi,

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

Angel

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…

Thanks,

Ed

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.

$("#grid1_scroll").scrollTop($("#grid1").find("tr[data-id='<primary key value>']").first().position().top);

instead of:

$("#grid1_scroll").scrollTop($("#grid1").find("tr[timestamp='<primary key value>']").first().position().top);

Hope it helps. Thanks,

Angel

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.

Thanks,

Ed

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.

Hello,

I too am very interested in this functionality. Is there a way to do it?

Thanks,

Alex

No, I did not solve this. As far as I know, person who continued this pilot project switched it to IBM Worklight and Sencha Touch.

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   

Please advise how to keep both the horizontal and vertical scrollbars visible from anywhere in the grid. Right now, my vertical bar is appearing on the document (outside the grid) and the horizontal scrollbar is appearing from within the grid at the bottom. As a result, if I want to scroll to the right, I have to first scroll down to the bottom and then I can access the horizontal scrollbar.

Hi,

Had you given table inside the div?

Thanks,

Sapna

Hi Alexender,

The above code doesn't work for me.

I had written like this:

$("#tblLstUPs_scroll").scrollTop(
$("#tblLstUPs").find("tr > td:contains('IN-173-52006')").first().position().top
);

Is the above snippet is correct?