Currently many operations (scrolling, certain updates during sorting) causes a row to be removed, and another inserted.
The Grid<T> class currently actually removes the <tr> element from the table, and adds a new one.
This results in a lot of DOM element churn, as can be seen in this timeline which was captured during a prolonged period of heavy scrolling back and forth in a table with several thousand rows:
It also has the effect that, for a split moment, the table has one fewer rows, which can cause a re-layout.
The solution is to remodel this as a 'replace' which takes an existing <tr> element, moves it to a new position and rebinds it to a new data item.
Currently many operations (scrolling, certain updates during sorting) causes a row to be removed, and another inserted.
The
Grid<T>class currently actually removes the<tr>element from the table, and adds a new one.This results in a lot of DOM element churn, as can be seen in this timeline which was captured during a prolonged period of heavy scrolling back and forth in a table with several thousand rows:
It also has the effect that, for a split moment, the table has one fewer rows, which can cause a re-layout.
The solution is to remodel this as a 'replace' which takes an existing
<tr>element, moves it to a new position and rebinds it to a new data item.