igx-datagrid: move selected row into view

I would like to scroll a per code selected row into view, so that it could be seen by the user.
Is this possible?

Thank you in advance,
Klaus

Hello Klaus,

I have been looking into your question, however, I'm not sure I understood your requirement and exact scenario completely. In case you require to scroll to a certain row selected or precisely defined during the execution of an event, for example, on a click or on loading the page, this could be achieved in several ways.

The first approach is with a method provided by the igx-grid component to navigate to a given row. This method is navigateTo which is passed the row index to scroll to. However, with this approach, the scrolled row will be at the bottom of the grid.

[embed:dc8ab71f-3b98-42d9-b0f6-e21e02a0f8e2:956a9667-b4e4-434b-83bd-e7fdf8c57717:type=typescript&text=public%20scrollToRow%28%29%7B%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.grid.navigateTo%2815%29%3B%0D%0A%0D%0A%20%20%20%20%7D]

The following approach uses the default row height and scroll position of the scroll. To begin with, we take the default row height with the grid's defaultRowHeight property, then multiply that height by the index of the row to scroll to. Finally, we use the row's verticalScroll and scrollPosition, setting it to the number obtained from the multiplication. With this approach, the scrolled row will be at the top of the grid.

[embed:dc8ab71f-3b98-42d9-b0f6-e21e02a0f8e2:25f5123d-6d8b-4043-acfa-82648ec73456:type=typescript&text=public%20scrollToRow%28%29%7B%0D%0A%0D%0A%20%20%20%20%20%20%20%20let%20scroll%20%3D%20this.grid.defaultRowHeight%20%2A%2015%3B%0D%0A%0D%0A%20%20%20%20%20%20%20%20this.grid.verticalScroll.scrollPosition%20%3D%20scroll%3B%0D%0A%0D%0A%20%20%20%20%7D]

The second described approach can be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

Georgi, Great answer, thank you very much

This code worked great to go to a specific record.  It always bring it to the top of the visible grid.  However, if the row contains a boolean checkbox and all you want to do is change its values — the action to click the box shifts the row to the top of the visible grid — and the subsequent click to change the value of the checkbow ends up changing the checkbox of a different row.  Is there a way to not navigate to the row if the row is already in the visible portion of the gid?

Hello Georgi,

thank you for your fast response.
Your answer and your sample is excellent,

Thank you for your efforts,
Klaus

Hello Klaus,

I am glad that you find my suggestion helpful.

Thank you for using Infragistics components.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

HI,

  I was wondering how to make this navigation work for a paginated grid if the record is not on the currently visible page?

[quote user=”BB1EF62F2FBF95F6B2F6674A05012AABEA41D9BB”]I was wondering how to make this navigation work for a paginated grid if the record is not on the currently visible page?[/quote]

I have the same question. papa's burgeria