This is a migrated thread and some comments may be shown as answers.

Interesting problem with dynamic docks.. how to keep the docks from "flashing in" on Page Load

1 Answer 86 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Joseph
Top achievements
Rank 1
Joseph asked on 24 Nov 2008, 10:53 PM
Guys, I'm running into an aesthetic problem that I would like to figure out how to fix.  Basically my docks "appear" after the dockzones themselves have been drawn on the screen.  In a scenario where a lot of docks are on the screen, a second or more may pass before all docks appear in their zones.  I believe I know why this is happening, but I would like to see if there is an architectural solution that will fix this problem as it's rather unpleasing (and confusing) to my users. 

The reason I believe this is happening is because the MyPortal solution sample code adds all dock controls to a single control container (e.g. an updatepanel) that's hidden on the page from the user (invisible).  The docks are docked into their proper zones using javascript, which runs as one of the last operations of the page (multiple calls to the .dock() command).  Basically the entire page gets drawn (including the empty raddockzones themselves) before the docks are added to their proper zones using JavaScript.  This is the solution as coded in the MyPortal example in the code examples page.  When one panel at a time is added to the page this is not that big of a deal, however when multiple panels are added/drawn all at once after the user has chosen a dock configuration and it has been persisted to the database and redrawn for the first time (e.g. on first page load) this problem shows up.

In my implementation, I have created a fully dynamic Portal page that runs off of a Telerik TabStrip and RadLayout complete with RadDockZones and RadDock's.  Basically the user can choose to create tabs (which I then save to an XML Template and create tabs on the Portal page which will contain "Docks" of the user's choosing) that I dynamically add to a RadTabStrip with a MultiPageView.  The user can then choose to add new docks to the page (from a stylized dropdownlist that shows a preview of the control, which I use a RadComboBox for).  I save information about each dock (I call them "Gadgets" a la Windows Vista) into a Gadget option that I serialize into XML.  The Gadget collection belongs to a Tab which lives in a Tabs collection, which lives in a Template XML node.  The tabs render Pages in the MultiPageView which I add Layouts to, which contain Zones that I can dock the gadgets into.

My users can choose dynamic layouts (I have user controls that define RadDockZones in different configurations, e.g. Two Columns, Three Columns, 4 Columns, etc).  I subclass the RadDockLayout and load an inner control with these raddockzones at the proper time in the page lifecycle so that the RegisteredZones collection is built correctly in the Layout.  I also add the Gadgets the user has chosen into the correct zones using javascript (dock() commands given the Zone name the user defines).  I intercept the DockPositionChanged event and make sure that all properties about my Gadgets.  Basically 100% of the page is dynamic, from the tabstrip to the layout, to the dockzones, to the docks themselves.

Instead of an updatepanel, I add my gadgets to a regular panel (I call it pnlGadgetDrop).  I tried using an updatepanel however I get  Microsoft AJAX framework javascript errors complaining about the controls already being registered (I don't have the text in front of me, however this is a common javascript error that shows up on the forums and has something to do with adding radcontrols to an updatepanel that themselves contain subcontrols with updatepanels).  I make sure to add the controls into the panel in the correct order each and every time a postback happens (including any "removed" controls) to keep from getting any viewstate problems.

This all runs beautifully and quite fast.  However my raddocks appear to "flash into life" on the screen.  This behavior does not happen if I add the docks directly to their zones (because then the html is generated before the page begins to load in the browser, instead of using the dock() command in javascript to dock the docks into their proper zones).  However I cannot simply add the docks to their correct zones as the solution to my "flashing" problem (using raddockzone.templatecontrol.controls.add of that dockzone).  If I do this then I will run into viewstate problems whenever the user reorders the controls (because I will be forced to add the controls into their new zones when they are reordered, and this will cause viewstate errors since I'm not restoring the control hierarchy).  This is why the MyPortal example adds the controls to a single control (an updatepanel) and uses the dock method to move them into their proper zones.

Do you guys have any suggestions for how to get rid of that "flashing" problem?  The only solution I can come up with is to mask the problem by showing a modal "Loading" screen until all controls are docked.  Not sure if anyone else has gotten this deep into creating a Portal Management System like I'm doing here and encountered this aesthetic issue of the docks "flashing" in, but if not then FYI.  Only real issue I've had so far though, so that's a good sign (-:

thanks,
Joseph

1 Answer, 1 is accepted

Sort by
0
Joseph
Top achievements
Rank 1
answered on 24 Nov 2008, 11:09 PM
Actually after having looked over some more examples it looks like the problem I'm experiencing may be implementation specific to what I'm doing.  I found a code example that involves making use of the LoadDockLayout command which does not seem to exhibit the same "flashing" problem that I ran into.

This is the URL I found.  I tried adding 10+ docks to the page and selecting "Make Postback" and I did not see the flashing.
http://demos.telerik.com/ASPNET/Prometheus/Dock/Examples/DynamicDocks/DefaultCS.aspx

I will experiment with adding the controls to the Layout itself and making use of LoadDockLayout.  This makes sense to me now as to why this would be faster (since the docking will happen prior to rendering the HTML, rather than waiting until the JavaScript has been generated at the end of the page to dock each of the gadgets using javascript operations).

So please disregard my post for now, I will do some more research and experimentation.

Much obliged,
joseph
Tags
Dock
Asked by
Joseph
Top achievements
Rank 1
Answers by
Joseph
Top achievements
Rank 1
Share this question
or