I've uploaded a simple example to reproduce my case:
I have a simple data grid with 20 columns (all DateTime values) and 20 records.
The grid uses advanced filtering and have a pager, so it only shows the default number of records (10). I also enabled row selection.
I launch the page and it renders immediately. I start clicking on the grid and I expect it to hightlight the entire row where I'm clicking, but that happens only after 5 seconds. The time for the grid to react seems to me very slow.
The weird thing is that if I reload the page (F5 in the browser), the page once again renders immediately but this time when I start clicking on the grid, the row selection event starts highlighting the entire row like after 15 seconds. Needless to say, this time is worse.
I have no clue on why this is happening. The first time the page launches, the grid only starts reacting to events after 5 seconds (which I consider to be too much time), but reloading the page makes it worse (x 3). I was expecting at least to have to wait the same amount of time.
To summarize, the problem is not the time the grid takes to show up (because it's immediate), but the time it takes to start reacting to events (in my case, a row selection).
Row selection will change the state of the component and since the columns are created in a loop inside Columns tag this will be evaluated on each StateHasChanged().
Ok, with the suggested source code, the first time I launch the page results in an immediate reaction from the grid. When I reload the page (F5) it takes like 3 seconds to respond.
What I still do not understand is why reloading the page makes the grid respond to events later than when launching the page for the first time. With my original code, as I said, it took 5 seconds for the grid (and the page, in general) to start reacting to events, but 15 seconds after I reloaded the page.
With the suggested source code, it takes like 3 seconds to respond to events, but 0 seconds the first time I launch the page. That is what I do not understand. Any ideas or clues about why that would happened?
The other thing that I noticed is that if I change the filter mode to "Simple" (my example it was set to "Advanced") those 3 seconds that it takes for the page to respond go down to 0. It seems that the Advanced filter mode does a lot of things that hurts performance of the page when rendering.
One last thing, does this suggested source code is a workaroud? Or is there any way that the grid's original source code can be changed in order to be able to add the columns by ust using the tags and not programatically. Something like not calling StateHasChanged per column but after all the columns have been added.
Of course it will since there is additional HTML rendered for each column (two DropDowns, DatePicker, etc per column) and this HTML will be rerendered on each change state of the component.
We are not aware of any faster approach still we are open to any suggestions on how to improve the performance in such case.
