I have a Form filled with ROWS defined as a User-Controls. Each ROW is constructed by assembling other User-Controls. There are many small User-Controls with vertical text. The total amount of user-control assembled can easily be around 100 per ROW.
Take a look at the attached screenshot.
I would like to hear your advice regarding a speed improvement for displaying it.
From what I can see, the creation itself is fast, but somehow the time between the creation is finished and the time it’s ready in the browser is substantial.
I already tried creating them using the Background task technique like in your sample, and it’s the rendering which is delayed.
When few rows (5 to 10) have been created and added, manipulating the interface is becoming slow.
Can you give me an advice on how to create it in a way to eliminate those effects ?
To keep you updated on this:
I have removed the rotation from your sample and the same code with thousands of controls is actually quite fast now. See quick video:
I’m looking to see how to set the rotation globally instead of control by control. You can also simply some of the complex composite controls by consolidating them into a single control and using an html template to render the inner content.
With C# is quite easy to use string interpolation to bind data to an HTML template.
I will update this thread with the rotation solution.
Just to mention, I tried removing the StyleSheet control from the user-control doing all the small vertical texts.
The creation time stays quiet the same, the rendering time delay also, but there seems to be a slight amelioration on the reactivity using the scrollbars.
I downloaded this and tried it as well. Something seems to be bogging down the browser – even after all rows are rendered I cant even use the scrollbars on the window.
From what I experimented, it seems that the browser doesn’t really plays a role. I tested with the 3 major ones, IE, FF, Chrome, and the rows creations is around 0.3 secs for 10 rows for all of them.
More rows added, more time it takes to render them and worthier gets the responsiveness of the browser interface.
May be the reflow is ok, and it’s due to the browser latency because of the many text rotations. I did them using a stylesheet control.
I also don’t see a real speed increase being on the Dev environment or on the full power of the deployed Server.
I did a self-contained test app which I tried to not de-structure too much so we keep a similar code structure.
Chrome? Would you be able to put together a sample app that creates a similar structure? The problem seems to be the browser rendering and reflow.
Please login first to submit.