Ajaxifying Docks

[Rob Linxweiler]

Hello,

I am developing an ASP.Net solution that combines RadAjaxManger, RadLayout/Zone/Dock, and RadChart controls.  This question is about using the first two (Ajax and Docks) together.  Here is the setup:

- There is a static RadDockLayout, and three static RadDockZones. 
- Users click and drag from a RadTreeView to add content to the layout.  The drop action causes a RadDock to be added to the targeted RadDockZone.  A WebUserControl is added to the ContentContainer of the RadDock.

This works fine, and user modifications to the layout are persisted to a database.  I am now Ajaxifying the layout, and am having problems.  I'm using a RadAjaxManager.  Since the docks are added dynamically, I'm using the:

            RadAjaxManager1.AjaxSettings.AddAjaxSetting(dock, dock)

command to Ajaxify the docks as they are added to the page, and indicate that they should only update themselves.  Regardless of the AjaxManager settings, however, the docks will almost always update all other docks in the layout.  The exception to this is if I add an AjaxManager dependency to each RadDockZone, indicating that each should only update itself.  In this case, the docks only update the docks in the same zone.  I have also tried adding an ASP:Label control to the page and indicating that the docks should only update that label; this results in the label being updated, along with all the other docks in the layout.

Question: can this be done?  Can I have dynamically-added docks that only update themselves on a Postback?  My plan is to have several reports on the page, and I can't afford to have a dozen reports updating every time a change is made to a single dock. 

Thank you!

[Pero]

Hello Rob,

Please take a look at the following Code Library article. A hidden UpdatePanel is used to perform the partial page updates and load and save the state of the dynamically created RadDock controls. Notice that when you try to update the content of a given dock object, only its content is updated and the other docks stay unchanged. I believe this is the desired behavior that you are trying to achieve.


Let us know if you have other questions.

Kind regards,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Rob Linxweiler]

Pero,

Thanks for your reply!

I had started out using the UpdatePanel solution.  However, with the addition of a RadTabStrip, RadTreeView, and sliding panels, the interaction was getting rather complex.  I switched to a RadAjaxManager to simplify Ajax management. 

Are UpdatePanels compatible with RadAjaxManager pages?  Is the RadAjaxManager unable to manage dynamic RadDocks?

Thank you!

Rob

[Pero]

Hello Rob,

I made some changes to the example with the hidden UpdatePanel by replacing the UpdatePanel with RadAjaxManager. The UpdatePanel is replaced by an asp:Panel, which is ajaxified by the RadAjaxManager1. The docks are added to the asp:Panel and docked with a client script (loaded from the server by the AjaxManager) to the specified zone.
 
Please test the project and let me know how it goes. The project is attached to the thread.

Kind regards,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Rob Linxweiler]

Pero,

Thanks very much for your help!  I'll give it a try next week and post results.

Rob

[Quinten]

Pero,

I've only recently had a chance to take a close look at the example you sent.  I have been using the "hidden panel" method to add new docks to the layout, and that seems to work well. 

I don't understand the functionality of the CreateSaveStateTriggers, though, and it's not working the way I need it to.

In Page_Init, you have:

                RadDockLayout1.Controls.Add(dock);
                if (!IsPostBack)
                {
                    Panel1.Controls.Add(dock);
                }

Doesn't this result in two instances of the dock being added to the layout? 

CreateSaveStateTrigger looks like this:

    private void CreateSaveStateTrigger(RadDock dock)
    {
        //Ensure that the RadDock control will initiate postback
        // when its position changes on the client or any of the commands is clicked.
        //Using the trigger we will "ajaxify" that postback.
        dock.AutoPostBack = true;
        dock.CommandsAutoPostBack = true;

        AjaxSetting trigger = new AjaxSetting();
        trigger.AjaxControlID = dock.ID;
        trigger.EventName = "DockPositionChanged";

        AjaxUpdatedControl updatedControl = new AjaxUpdatedControl();
        updatedControl.ControlID = Panel1.ID;

        trigger.UpdatedControls.Add(updatedControl);
        RadAjaxManager1.AjaxSettings.Add(trigger);


        trigger = new AjaxSetting();
        trigger.AjaxControlID = dock.ID;
        trigger.EventName = "Command";

        updatedControl = new AjaxUpdatedControl();
        updatedControl.ControlID = Panel1.ID;

        trigger.UpdatedControls.Add(updatedControl);
        RadAjaxManager1.AjaxSettings.Add(trigger);
    }

Where the updated control is always the hidden panel.  I don't understand how changes in the dock get written to the browser.  Your example controls make use of RadAjaxManagerProxy settings, which works for updates initiated within the dock content, but in my dock layout, I would like for dock custom commands to result in updates to both the dock (the title and the dock commands), and the dock content (usually a report of some sort, whose content will be modified as a result of the selected dock command). 

In the example you gave, the dock command is handled, but updates to the dock or dock content are not being updated on the browser.  For example, I put this code in the dock command handler:

    void dock_Command(object sender, DockCommandEventArgs e)
    {
        RadDock dock = (RadDock)sender;
        dock.Title = DateTime.Now.ToLongTimeString();
        dock.ContentContainer.Controls.Clear();

    }

But neither the title nor the content are changed on the browser.

Any help?  Thank you!

[Quinten]

Perhaps I should simplify my question:

I want to: 

• create a RadDock dynamically,
• have it added to a particular RadDockZone in the RadDockLayout, and
• create RadAjaxManager triggers so that when a user clicks on a custom DockCommand, it results in partial postbacks to the dock (and the dock's ContentContainer) whose command icon was clicked. 

I have had problems (as outlined in previous posts) implementing this.  Should this be possible?

Thanks!

[Pero]

Hi Patrick,

The intention of the approach taken, is to update the hidden UpdatePanel (or ajaxified asp:Panel) only, and nothing else. This way, for example, if there is a video in the dock, it won't be restarted, because the dock is not updated. Also the user is not interrupted, if s/he is interacting with the dock.

You should use the approach implemented in the following project from our Code Library, if you need to update the dock's content container and its title: http://www.telerik.com/community/code-library/aspnet-ajax/docking/save-dockstate-in-database-using-radajaxmanager.aspx.

Regards,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Quinten]

Pero,

Thanks for your reply.  The example you linked to doesn't do a partial update on just the initiating dock--the "UpdatedControls" is the Panel that wraps the entire layout.  For our situation, this causes a lot of unnecessary data transmission and browser activity. 

Is there no way for a dynamic dock to have itself as the UpdatedControl?

Thank you!

[Pero]

Hi Patrick,

It is possible, but in scenarios when the dock cannot be dragged on the page. If the movement is enabled, you could actually move the dock outside the AJAX panel, and this will result in exception, because another dock with the same ID will be created. That's why we suggest that the docks should be with DockMode.Docked, and the whole Layout is ajaxified - the dock should never leave the AJAX panel.

If you need to update a single dock, you should wrap its content within UpdatePanel, and create the needed ajax triggers to update panel.


Best wishes,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.