Add New RadDock to Top of RadDockZone

[Ryan]

My users would like the newest RadDock to be placed above the existing RadDocks in a given RadDockZone.  The default behavior is to add the newest RadDock to the bottom. How is this possible?

I am currently adding new RadDocks using "RadDock.Dock(RadDockZone)".

Would I be able to use something like "rdlDockLayout.RegisteredDocks.Reverse()" or "rdlDockLayout.RegisteredDocks.OrderByDescending(...)"?

I would prefer to accomplish this using VB.NET.

[Gido Geek]

Hey Ryan,

Can't test my theory right now but I think I know the answer to your question.

I think you can set the Index of you Raddock by doing this

dock.Index = 0;  zone.Docks.Add(dock);

Hope this helps,

Please let me know how it goes. I might be able to assist you further once I get home.

Kind regards,

Gido

[Ryan]

Thanks for the reply, Gido.  I had thought about that solution, but didn't think that explicitly assigning the index would do anything, as the index seems to be assigned automatically on the client side, "behind the scenes".  I tried your suggestion, but RadDocks are still being added to the bottom of the RadDockZone.  I couldn't even seem to find a client-side command to set the index of the RadDock that way, only to get the index (http://www.telerik.com/help/aspnet-ajax/dock_clientraddock.html).

In the documentation for get_index, Telerik says, "To change the docking position of the control, use the dock method of the parent docking zone".  I don't see any dock method belonging to the RadDockZone, but only to the RadDock, which doesn't allow one to specify the position to dock it, just the RadDockZone to dock it within.

Would you happen to have any other suggestions?  Thanks for your time.

[Gido Geek]

Hey Ryan,

I'm not home yet so I didn't have time to test anything. I never had your problem myself since I changed the index of my widget in db and just let the framework to the rest.

        protected void rdlFramework_LoadDockLayout(object sender, DockLayoutEventArgs e)
        {
            //Populate the event args with the state information. The RadDockLayout control
            //will automatically move the docks according that information.
            foreach (Telerik.Web.UI.DockState state in CurrentDockStates)
            {
                e.Positions[state.UniqueName] = state.DockZoneID;
                e.Indices[state.UniqueName] = state.Index;
            }
        }

I just changed my CurrentDockStates objects Index and let the LoadDockLayout position the widgets correctly after that. I'll spare you the code of my business-logic since it includes allot of clutter and unneeded stuff for your wishes.

Basically I worked around your problem. Maybe this is an option for you.

If not I'll dive in my old code and see if I can find you a better option. Let me know how it goes.

[Ryan]

I've added SQL to force the index to be 0, but this doesn't place the RadDock at the top due to the lifecycle:

1. User clicks RadDock to add
2. RadDock is added to RadDockZone via server-side code
3. RadDockLayout is saved back to the database

I would need to change the index somewhere between steps 1 and 2, on the client-side.  I would also presumably have to increment the indices of the other RadDocks in the RadDockZone to move them down one position.

I am actually already using the same code as you in my DockLayout.LoadDockLayout event handler.

Do you have any other suggestions?  I appreciate your time and willingness to help out!

[Gido Geek]

Hey Ryan,

Just a quickie before I leave work for home.

I found this 

        function DockRadDock1ToRightZone()
        {
            var leftZone = $find('<%= RadDockZone2.ClientID%>');
            var dock = $find('<%= RadDock1.ClientID%>');

            if (dock && leftZone && dock.get_parent().get_id() != "RadDockZone2")
            {
                leftZone.dock(dock, 0);
            }
        }

Doesn't this do exactly what you want ?

Or does it still goes to the bottom ?

ps. found it here

Kind regards,

Gido

[Ryan]

I believe that I have come up with a 99% solution.  When dynamically adding a new RadDock upon the user's request, I associate the RadDock's "OnClientInitialize" with a custom JavaScript function that simply docks it to its parent RadDockZone (because at the point of OnClientInitialize, the RadDock already belongs to a RadDockZone) in position 0.

RadDock.OnClientInitialize = "DockAtTop"

 

function DockAtTop(sender, eventArgs)
{
    sender.get_parent().dock(sender, 0);
    __doPostBack('<%=RadDockLayoutUpdatePanel.ClientID%>', '');
}

As you can see, I also have to explicitly force a PostBack in order for each RadDock's new index to be saved to my database.

The reason I call this a 99% solution is that, in some cases, when adding a RadDock that contains a FusionCharts Map as well as a RadSlider, the "__doPostBack()" line raises a 'parentNode' is null or not an object error.  This error doesn't keep anything from functioning correctly, and I've tried providing different objects as __doPostBack()'s first parameter to no avail.

If anybody has any thoughts on this, please let me know!

By the way, Gido's suggestion as well as Telerik's documentation (bottom example at http://www.telerik.com/help/aspnet-ajax/dock_client-side_basics.html) helped me arrive at this solution.

[Gido Geek]

Hey Ryan,

I just looked here , doesn't the "doPostBack" of the RadDock client object method fix your problem ?

Kind regards,

Gido

[Pero]

Hello Ryan,

Another way of placing the RadDock at the desired index in the RadDockZone through the DockZone.dock(dock, index) client-side method is to register a client-script from the server (instead of using the OnClientInitialize event). This is the code that registers the script:

ScriptManager.RegisterStartupScript(this,
    this.GetType(),
    "MoveDock",
string.Format(@"function _moveDock() {{
                    Sys.Application.remove_load(_moveDock);
                    $find('{1}').dock($find('{0}'),{2});
                    }};
                    Sys.Application.add_load(_moveDock);", dock.ClientID, DropDownZone.SelectedValue, dockPosition),
true);

If you need to perform a postback to save the dockstate please follow Gido's suggestion.

For your convenience, I have attached a sample project (a modification of MyPortal demo) that follows this logic.

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.

[Ryan]

Gido, thanks for bringing that up.  I've actually been testing with __doPostBack() and RadDock.doPostBack, and both have the same issue.  I'm going to try to register the client script server site, as Pero had suggested, and let you know if that changes things.

[Ryan]

Pero,

Thank you for the suggestion.  However, even after registering the Javascript server-side, I am still getting the 'parentNode' is null or not an object error.  I appreciate you time in addressing this issue.  Please let me know if you have any further thoughts as to prevent this error from happening.  I would be happy to open up a ticket and send you a sample of my code if you would like.

Thanks again.

~Ryan

[Pero]

Hi Ryan,

I don't know what might be causing the issue when "__doPostBack()" is called, but if you provide a sample I can try to debug the problem and will do my best to find a solution.

I am looking forward to receiving your project.

All the best,
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.