[Solved] Dynamic RadDockLayout,RadDockZone, and RadDock creation

[JQ]

I'm having trouble creating the dock layout and dock zone, as well as rad docks.

It is not an option to place the docking controls in the aspx or ascx pages.
The following is the code I have. It does not have any errors except for a javascript error that says
'Sys' is undefined.

    protected void Page_Load(object sender, EventArgs e)
        {

            bool smExists = false;
            foreach (Control control in Page.Form.Controls)
                if (control is ScriptManager)
                {
                    smExists = true;
                    break;
                }

            if (!smExists)
            {
                ScriptManager sm = new ScriptManager();
                Page.Form.Controls.Add(sm);
                Page.Header.Controls.Add(new LiteralControl(@"
<script language='javascript'>
function changeRadDockHandle(dockID,handleID){
    var dock = $find(dockID);
    dock.set_handle(document.getElementById(handleID));
}
</script>"));

            }




            RadDockLayout layout = new RadDockLayout();
            layout.ID = "layout";

            Page.Form.Controls.Add(layout);
            RadDockZone zone = new RadDockZone();
            layout.Controls.Add(zone);
            RadDockZone zone2 = new RadDockZone();
            layout.Controls.Add(zone2);
            UpdatePanel updatePanel = new UpdatePanel();
            updatePanel.ID = "UpdatePanel1";
            layout.Controls.Add(updatePanel);

            zone.FitDocks = true;
            zone.MinHeight = Unit.Pixel(200);
            zone.BorderWidth = Unit.Pixel(1);
            zone.ID = "zone";
            zone2.BorderWidth = Unit.Pixel(1);
            zone2.ID = "zone2";

            RadDock dock = new RadDock();
            dock.DockMode = DockMode.Default;
            dock.Pinned = false;
            dock.ID = "dock";
            dock.ContentContainer.Controls.Add(new LiteralControl("blahblah"));
            dock.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.None;
            dock.DockHandle = DockHandle.None;
            dock.OnClientInitialize = CreateJavaScriptFunctionCall(dock);

            zone.Controls.Add(dock);
            zone.Orientation = Telerik.Web.UI.Orientation.Horizontal;
            zone2.Orientation = Telerik.Web.UI.Orientation.Vertical;

        }
        string CreateJavaScriptFunctionCall(RadDock dock)
        {
            string dockHandleID = "";
            foreach (Control control in dock.ContentContainer.Controls)
            {
                if (control is LiteralControl)
                {
                    dockHandleID = control.ClientID;
                }
            }
            return "changeRadDockHandle('" + dock.ClientID + "','" + dockHandleID + "')";
        }

What am I doing wrong?
This is a simple web project in VS 2005.

[Petya]

Hi JQ,

For dynamically created RadDock objects please take a look at the following online example. For the 'Sys' is undefined error - make sure you have placed a ScriptManager on your page and have correctly configured your application to use ASP.NET AJAX upon which RadDock Prometheus is based. In case you still experience any problems, please write us again providing a simple running project that reproduces the problems plus a detailed description on what you try to achieve. To send us files you need to open a support ticket as shown in the attached instructions.

Greetings,
Petya
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[JQ]

Thank you for such a fast response!

However, the online demo you provided me didn't show how to create the RadDockLayout dynamically from the codebase.

I'm also adding the ScriptManager to the page dynamically, if you take a closer look at the code I provided.

protected void Page_Load(object sender, EventArgs e)
        {
  //find ScriptManager
            bool smExists = false;
            foreach (Control control in Page.Form.Controls)
                if (control is ScriptManager)
                {
                    smExists = true;
                    break;
                }

            if (!smExists)
            {
//add ScriptManager to the page
                ScriptManager sm = new ScriptManager();
                Page.Form.Controls.Add(sm);
//special JavaScript to change the drag handle
                Page.Header.Controls.Add(new LiteralControl(@"
<script language='javascript'>
function changeRadDockHandle(dockID,handleID){
    var dock = $find(dockID);
    dock.set_handle(document.getElementById(handleID));
}
</script>"));

            }



  //create the layout, add it to the page
            RadDockLayout layout = new RadDockLayout();
            layout.ID = "layout";

            Page.Form.Controls.Add(layout);
//create zones
            RadDockZone zone = new RadDockZone();
            layout.Controls.Add(zone);
            RadDockZone zone2 = new RadDockZone();
            layout.Controls.Add(zone2);
//add UpdatePanel to the layout as Examples
            UpdatePanel updatePanel = new UpdatePanel();
            updatePanel.ID = "UpdatePanel1";
            layout.Controls.Add(updatePanel);

            zone.FitDocks = true;
            zone.MinHeight = Unit.Pixel(200);
            zone.BorderWidth = Unit.Pixel(1);
            zone.ID = "zone";
            zone2.BorderWidth = Unit.Pixel(1);
            zone2.ID = "zone2";
  //create dock
            RadDock dock = new RadDock();
            dock.DockMode = DockMode.Default;
            dock.Pinned = false;
            dock.ID = "dock";
            dock.ContentContainer.Controls.Add(new LiteralControl("blahblah"));
            dock.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.None;
            dock.DockHandle = DockHandle.None;
            dock.OnClientInitialize = CreateJavaScriptFunctionCall(dock);

            zone.Controls.Add(dock);
            zone.Orientation = Telerik.Web.UI.Orientation.Horizontal;
            zone2.Orientation = Telerik.Web.UI.Orientation.Vertical;

        }
        string CreateJavaScriptFunctionCall(RadDock dock)
        {
            string dockHandleID = "";
            foreach (Control control in dock.ContentContainer.Controls)
            {
                if (control is LiteralControl)
                {
                    dockHandleID = control.ClientID;
                }
            }
            return "changeRadDockHandle('" + dock.ClientID + "','" + dockHandleID + "')";
        }

I'm trying to build a content management system where users can easily rearrange the contents using Telerik's Docking controls.

The challenge is that, I have to work upon a existing code for our product that creates almost everything dynamically from the codebase.

It is not even in aspx.cs or ascx.cs... The code sits at our presentation layer in App_Code folder.

That is why I really need to be able to create docks and everything from the codebase.

About the Sys object error in javascript, I will open the support ticket and provide you the simple project I was working on.

[JQ]

ha! I found the reason why I was having the javascript errors...

I simply needed to copy the web.config file from the Trial download package (RadControls_Prometheus_2007_1_626_trial.zip)

I'm moving on...

Thank you.