dock / undock command

[nora]

Hello ,

i have a dynamically created raddock , ( from the example)  but i have set is radDockZoneID  to " " so it would be floating once it is created , i want to creat a command that makes it docked back when clicked, and if its docked it will return to its floating position again ?

[Slav]

Hello Nora,

My suggestion is adding a custom command to the RadDock you create. This command will check the dock mode of the control - if it's floating, then it will be changed to docked to the RadDockZone and vice versa.

In the code snippet below you can see how the custom command is added to the RadDock:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        RadDock dock = new RadDock();
        dock.DockMode = DockMode.Floating;
        dock.UniqueName = Guid.NewGuid().ToString().Replace("-", "a");
        dock.ID = string.Format("RadDock{0}", dock.UniqueName);
        dock.Title = "Floating";
        dock.Text = string.Format("Added at {0}", DateTime.Now);
        dock.Width = Unit.Pixel(300);
        DockCommand customCommand = new DockCommand();
        customCommand.OnClientCommand = "DockUndock";
        dock.Commands.Add(customCommand);
        dock.Commands.Add(new DockExpandCollapseCommand());
        RadDockLayout1.Controls.Add(dock);
    }
}

DockUndock is the client-side function that executes the command behavior.

<script type="text/javascript">
            function DockUndock(sender, args) {
                var dockZone = $find("<%= RadDockZone1.ClientID %>");
                if (sender.get_dockMode() == 1) { // check if DockMode is Floating
                    sender.set_dockMode(0); // Docked DockMode is set
                    dockZone.dock(sender, 0); // RadDock is docked in the RadDockZone
                    sender.set_title("Docked");
                } else {
                    sender.set_dockMode(1); // Floating DockMode is set
                    sender.set_title("Floating");
                }
            }
</script>

Here you can find live demo, containing useful examples of RadDock's custom commands.

I have attached the fully working project, which contains the examples shown above.

Greetings,
Slav
the Telerik team

[nora]

Hello , First of all thanks for the fast reply ,
i have tried the client side function ,, the floating part worked fine after i added an x,y coordination (set_top, set_left) , but i get an error when i click the custom command again to get it docked back ?

Thank you Again for your help,,

[Slav]

Hello Nora,

I am afraid that at this point I cannot tell what the reason for the problem might be as it seems that the information that you provided is not enough for me to reproduce it locally.  I added a sample page, recreating the scenario you described and short video, showing the behavior I am experiencing.

Could you please modify the attached page accordingly so that it matches your case? If not, please send me a sample, runnable project (in a support ticket) that isolates the issue so that I can inspect it locally and provide more to the point answer.

Regards,
Slav
the Telerik team