Is it possible to move grid horizontal scrollbar to the top of the grid like shown in the picture below?
Hello,
After an investigation, I have determined that your requirement could be achieved by using the ‘navigateTo’ method and passing the index of the row, to which it should be scrolled. This could look as follows:
this.grid.navigateTo(0);
Please test it on your side and let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
The goal is to move scrollbar to the top of grid to provide better user experience.
Regards,
I understand and I hope the suggested solution works for you.
Please, let us know if you have any other questions on the matter.
Best regards,Bozhidara PachilovaSoftware Developer
The goal is to not navigate to the top but to move scrollbar to the top of grid. Can't you see my image that I attached?
Hi,
I am afraid the screenshot is not visible. As it may be a question of a technical issue, could you please share it via a link instead?
Anyways, going back to the initial question and suggestion, I assume there is a slight confusion here as the requirement seems to be about moving the horizontal scrollbar to top. What Monika suggested would move the vertical scrollbar, so that the record at index 0 becomes visible.
If your requirement is rather about moving the horizontal scrollbar back to the first column instead, that would be at the leftmost position (and not top), then the same navigateTo method accepts a second parameter that is the visibleColIndex. If 0 is passed, then the grid would be scrolled horizontally to the left.
If you would like to maintain the vertical scroll position, then the first argument of the navigateTo method that indicates the record index, should match the last visible record index.
For your convenience, I prepared this sample illustrating this suggestion. As you will be able to see, initially the grid is scrolled vertically down to a certain position and horizontally right to the last column. You can test the suggestion by pressing the “Scroll back to first column (horizontally)” button and observe the result.
In conclusion, this suggestion is based on my current understanding of your requirement, however, if I did not quite catch what you mean, please, provide elaborate further by linking a screenshot or ideally, forking and modifying the sample. Thank you for your cooperation.
Best regards,Bozhidara Pachilova
This is not what i mean. It is not about moving horizontal scrollbar back to the beginning. It is about moving horizontal scrollbar physically to the top of the grid above column headers.
Regards
Thank you for clarifying.
This is not something built into the grid and in general whether or not the opposite qualifies as a better user experience, would depend on the specific application and user expectations.
So, I can suggest a workaround to achieve this, although, as such, it has to be adopted with caution and be thoroughly tested. Additionally, it has to be observed when bumping the igniteui-angular package version in the future, as it uses an internal CSS class of the IgxGrid, which is subject to modification without being announced as a breaking change.
Having said this, your requirement can be achieved by modifying the grid-row position of the element with class “.igx-grid__scroll” in CSS:
:host::ng-deep { .igx-grid__scroll { grid-row: 1; }}
Please, check out the modified sample and let me know if it works for you.