Hi,
We have the React Infragistic WebGrid and We are doing UI Automation with selenium but we face the challenge with Infragistic WebGrid
The challenge is We can not get the Grid data that is not visible on Grid by the Selenium method or Javascript method, We tried with the Keyboard utilities to scroll the grid data but that is a time-consuming process
the scenario here is: we have 50 rows of data and we want to perform right-click operation on the 15th row but UI shows 8th rows how we can do that with the help of selenium or any other method
please give some solution that helps us in this scenario
Hello Ashish,
By the “React Infragistics WebGrid,” I am under the impression that you are referring to the IgrDataGrid. If this is not the case, please let me know.
I am not personally familiar with Selenium, but the IgrDataGrid virtualizes and recycles its DOM elements for rows that are out of view, which is likely why you are unable to get the elements for the rows that are out of view.
My best recommendation in this case would be to first invoke one of the grid’s “scrollTo” methods – since you know the index of the row, I would recommend the scrollToRowByIndex method on the grid. This will bring the grid’s row into view and as such, it will create the DOM elements for the row. I am under the impression that you are currently able to get the pieces you need if the row is in view, and so after calling this method, it should allow you to do that.
Please let me know if you have any other questions or concerns on this matter.
Hello Andrew,
Thanks for the quick response.
Can u please provide a sample code for this that will really helpful for us
The below is sample code for invoking the scrollToRowByIndex method mentioned above that will scroll the row at index 20 into view:
this.grid.scrollToRowByIndex(20);
This is assuming that you have a reference back to the IgrDataGrid (this.grid). If you do not already have this, you can use the ref method of the grid to get that like so:
<IgrDataGrid ref={this.onGridRef} ….
public grid: IgrDataGrid;
public onGridRef = (grid: IgrDataGrid) => { if (!grid) { return; } this.grid = grid; }