How to Create RadDockZone object client side

8 posts, 0 answers
  1. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 14 Mar 2012 Link to this post

    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
  2. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 15 Mar 2012 Link to this post

    Hi ALL,

    Please please give me solution for above issue.

    Thanks,
    Abhishek K
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 16 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 16 Mar 2012 Link to this post

    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
  6. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 20 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 21 Mar 2012 Link to this post

    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
  8. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 23 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Abhishek
    Abhishek avatar
    45 posts
    Member since:
    Jul 2012

    Posted 24 Mar 2012 Link to this post

    Hii Slav,
    Thnaks for the solution. Its appreciable solution.
    Thanks,
    Abhishek K
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017