Telerik RagGridView – Where Are My Cells Gone?

My latest application required a RadGridView having a dynamic number of columns. And therefor, the binding of the data an event handler needed to by managed during runtime as well.

Not really in issue: handle the RowLoaded event, iterate over the cells of the row passed by the event arguments, and everything is fine. That’s what I thought and implemented.

It was fine until the number of rows to be displayed exceeded the number of rows that could be displayed. When starting to scroll the grid in the UI, an exception occurred (in this case, the browser windows turned white and the status bar mentioned there was an error on the page – really helpful!)

So I had to start the debugger, and immediately I saw what caused the exception: the number of cells in the row passed to the event handler was smaller than the number of columns of the grid. Since I iterated over the number of columns of the grid, and then used the index to access the corresponding cell of the row, it has to fail.

Soon it was obvious that the number of cells in the row matched the number of columns displayed in the browser. But where have all the other cells gone? The answer to this question is UI Virtualization, explained in this article:

After reading the article, the solution was quite easy: turn of the column virtualization of the grid, and the number of cells in the row passed to the handler was matching to the number of columns of the grid.

I think it’s worth to mention that during the initial loading of the grid, all rows had the matching number of cells in the RowLoaded-handler, even with UI virtualization turned on. The mismatch only occurred when the user started to scroll.