Row Virtualization and Accessing the DOM

To improve performance, row DOM is not created for every record in the Grid's model, but only for the rows, that are visible within the current viewport. This allows large sets of records to be displayed faster. It is important though, that this is considered when programming grid features and not try to access parts of the grid's DOM, that are not yet created. Grid methods, that change either the viewport (e.g. include scrolling), or the rows, visible in the viewport (e.g. adding and removing rows) are defined as asynchronous functions and any subsequent code, which would access the newly created DOM should be added to the promise chain.

Here is an example: considering that row #100 is outside the current viewport, scroll so it becomes visible and set a border around its element:

JavaScript Copy Code
// the wrong way
grid.bringIntoView(100);
grid.getRowElement(100).style.outline = "2px solid red"; // this line will fail, since the DOM for the row #100 is not yet created, therefore getRowElement(100) will return undefined

JavaScript Copy Code
// the wrong way grid.bringIntoView(100); grid.getRowElement(100).style.outline = "2px solid red"; // this line will fail, since the DOM for the row #100 is not yet created, therefore getRowElement(100) will return undefined

JavaScript Copy Code
// the correct way
// wait for the asynchronous scroll to finish, then access the new DOM
grid.bringIntoView(100).then(() => { grid.getRowElement(100).style.outline = "2px solid red" });