How to Create RadDockZone object client side

[Abhishek]

Hi ALL,

Please help me on Creating RadDockZone object client side. Here i am posting my sever side code, the same code i need it in client side:

        RadDockZone rdzOuterZone = new RadDockZone();

        rdzOuterZone.ID = "rdzOuterZone";

        rdzOuterZone.EnableTheming = false;

        rdzOuterZone.Orientation = Orientation.Vertical;       

Its very urgent.... Help out me on this.

Thanks,
Abhishek K

[Abhishek]

Hi ALL,

Please please give me solution for above issue.

Thanks,
Abhishek K

[Slav]

Hi Abhishek,

You could recreate the HTML of the control from a template through using JavaScript and its DOM API. Please, note that you will also need to provide the $create clause with all the necessary dependencies. For best results, please, review the generated code from a single RadDockZone. This approach is quite complex and may involve a lot of client-side complications. 

An easier approach is to use the RadDockZone's client-side method clone. It will copy the client-side object of an already existing RadDockZone control:

dockZone = $find("<%=RadDockZone1.ClientID %>");
var newDockZone = dockZone.clone();

Regards,
Slav
the Telerik team

[Abhishek]

Hii Slav,
Thanks for the reply. The way you have created the object at the client side it helped me to create object RadDockZone
client side but i can't able to drag n drop the things in it don't know why like so. If you give solution without clone then no need to create one dummy RadDockZone tag for that. Because i am working on dynamic dashboard, So i don't need any controls on my page initially it should blank.

Thanks,
Abhishek K

[Slav]

Hello Abhishek,

As I mentioned in my last post, creating a RadDockZone from scratch on the client-side is quite complicated and it is not in the scope of our support system, which is focused on providing workarounds for bugs and incompliances with the RadControls.

If you want to display an empty page before adding the dock zone controls, you can hide the initial RadDockZone via CSS styles. When a clone object of the dock zone is created, you can manage it, which includes changing the styles of its HTML element in order to make it visible. I have added a page that demonstrates this approach.

If you are unable to dock the RadDocks in the new RadDockZone, most probably you have either set the dock controls with DockMode="Floating" or you have specified the only the initial RadDockZone as allowed by setting the RadDock property AllowedZones. I would suggest checking if the problem can be reproduced in the attached sample as well.

Regards,
Slav
the Telerik team

[Abhishek]

Hi Slav,
I have made small changes in your code as per my requirement. i.e I have added one <div id="div"></div> tag in the code and in javascript after cloning the RadDockZone control i am assigning to above div tag. But RadDockZone Control is not rendering on the page. After rendering on the page i should drag and drop the Raddock in it. Please correct me. Here is my code.
ASPX:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
       </telerik:RadScriptManager>
       <script type="text/javascript">
           function pageLoad()
           {
               dockZone = $find("<%=RadDockZone1.ClientID %>");
               var dockZoneElement = dockZone.get_element();
               $telerik.$(dockZoneElement).css("display", "block");
               $telerik.$(dockZoneElement).css("width", "300px");
               $telerik.$(dockZoneElement).css("height", "100px");

               document.getElementById("div").appendChild(dockZoneElement);
           }
       </script>
       <telerik:RadDockZone runat="server" ID="RadDockZone1" Height="100px" Width="100px"
           Style="display: none; background-color: Yellow;">
       </telerik:RadDockZone>
       <telerik:RadDock runat="server" ID="RadDock1" Width="200px" Top="180" Left="20" DockHandle="TitleBar">
       </telerik:RadDock>
       <div id="div">
       </div>

Regards,
Abhishek K

[Slav]

Hi Abhishek,

Note that you should call the client-side method clone in order to create a copy of the RadDockZone control. Currently you are only referencing the hidden RadDockZone and you are moving it in the DOM tree. The following code sample show how to get a clone of the dock zone control:

dockZone = $find("<%=RadDockZone1.ClientID %>").clone();

Aside from this, your code appears to be correct and the RadDockZone is displayed as expected on my end. If the dock zone control is not visible, it is possible that you have custom CSS styles, which are affecting its appearance. You can check if this is the case by removing your styles from the page.

I have attached a sample page that implements the solution and includes the last modifications of your scenario.

Greetings,
Slav
the Telerik team

[Abhishek]

Hii Slav,
Thnaks for the solution. Its appreciable solution.
Thanks,
Abhishek K