RadDock as Popup

12 posts, 0 answers
  1. John
    John avatar
    28 posts
    Member since:
    Mar 2010

    Posted 08 Jun 2011 Link to this post

    Hi there,

    I currently have a few controls that is embedded inline in my page and it being referenced in the code behind.  I used a RadToolTip control to display the controls in a "popup" like window.  This works great, however, I've read that there is no support for a ToolTip inside a ToolTip.  Looking into it further, it was suggested that I used a RadWindow or RadDock.

    A RadWindow does not work since the ContentTemplate cannot be referenced inside the parent page's code behind.

    A RadDock shows up, however, is it possible to show/hide it like a popup?

    Any other suggestions to implement an inline "modal popup"?

    Thanks
    John
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 13 Jun 2011 Link to this post

    Hello John,

    Which version of RadControls for ASP.NET Ajax are you using? In the recent versions we have made sure the child controls of the window can be accessed in the Code-Behind.
    To open/close a RadDock use the RadDock.set_closed(toClose) client-side method. Passing true will close the dock.
    We have an example that shows how to make the RadDock modal. Here is a link to it: Modal RadDock.

    Best wishes,
    Pero
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    28 posts
    Member since:
    Mar 2010

    Posted 13 Jun 2011 Link to this post

    Thanks Pero for the code.  Works great!

    A quick question..is there a way to center the "popup" relative to the browser?
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 14 Jun 2011 Link to this post

    Hello John,

    You should get the center of the browser window, and then use the RadDock's set_top and set_left to position the dock at the desired place. Use the following code to get the width and height of the dock:
    var width = parseInt(dock.get_width());
    var height = parseInt(dock.get_height());
    if (isNaN(width)) width = 0;
    if (isNaN(height)) height = 0;

    The following thread might also be helpful:
    http://www.telerik.com/community/forums/aspnet-ajax/docking/raddock-on-screen-center.aspx

    Kind regards,
    Pero
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. John
    John avatar
    28 posts
    Member since:
    Mar 2010

    Posted 16 Jun 2011 Link to this post

    Thanks again Pero.  I've modified the example to capture the browser size and scroll position.

    function ShowRadDock()
    {
        var myWidth = 0, myHeight = 0;
        var scrollLeft = 0;
        var scrollTop = 0;
         
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            myWidth = window.innerWidth;
            myHeight = window.innerHeight;
            scrollLeft = window.pageXOffset;
            scrollTop = window.pageYOffset;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;
             
            scrollLeft = document.documentElement.scrollLeft;
            scrollTop = document.documentElement.scrollTop;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;
            scrollLeft = document.body.scrollLeft;
            scrollTop = document.body.scrollTop;
        }
     
        var dockImport = $find("<%= RadDock1.ClientID %>");                        
        var dockStyle = document.getElementById("<%= RadDock1.ClientID %>");
            
        var left = (myWidth - dockImport.get_width().replace("px","")) / 2 + scrollLeft;
        var top  = (myHeight - dockImport.get_height().replace("px","")) / 2 + scrollTop;   
        if (left < 0){
            left = 0;
        
        if (top < 0){
            top = 0;
        }        
        dockStyle.style.left = left + "px";
        dockStyle.style.top = top + "px";
        dockImport.enableModalExtender();
    }
  7. John
    John avatar
    28 posts
    Member since:
    Mar 2010

    Posted 05 Nov 2012 Link to this post

    Hi there,

    I upgraded to the 2012 Q3 release of ASPX.NET and the modal RadDocks I've been using in this example ( (http://www.telerik.com/community/code-library/aspnet-ajax/docking/modal-raddock.aspx) has been broken.  Is there a new way of displaying a modal popup?

    John
  8. John
    John avatar
    28 posts
    Member since:
    Mar 2010

    Posted 07 Nov 2012 Link to this post

    A little bit more information on the issue I am having.  The RadDock pops up fine but I am having a problem with the RadAjaxPanels inside the RadDock.  

    The button (imgEdit) that pops up the modal also updates some of the labels and dropdowns inside the RadDock.  I've added a trigger on the button to update the RadAjaxPanel(rapEdit) inside the RadDock.  The labels and dropdowns update, however, the RadDock contents are duplicated underneath the modal.  Please refer to the attached screenshot.

    <asp:ImageButton runat="server" ID="imgEdit" ImageUrl="/images/edit.png" OnClientClick="ShowEditRadDock();" OnClick="btnEdit_Click"/>


    <telerik:RadAjaxManagerProxy ID="ajaxManagerDataList" runat="server"
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="imgEdit"
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rapEdit" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

  9. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 08 Nov 2012 Link to this post

    Hello John,

    I tried to reproduce the problem you described, but to no avail. Please check the attached test page and let me know if there are differences compared to your actual project. Here you can check the behavior examined on my end.

    I would suggest verifying if your dock is located in the content of an UpdatePanel or RadAjaxManager. A floating dock, such as the one in the modal popup example, is rendered as direct child of the form. As a result it will be moved outside the UpdatePanel and the panel will try to recreate the dock in its content, which will cause problems. If this is the case you should either remove the UpdatePanel or placed the RadDock in a RadDockZone.

    If you are still having difficulties, after examining the information above, please describe the steps for modifying the attached sample so that I can reproduce the issue locally. This will allow me to inspect it and provide a more to the point answer.

    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.
  10. John
    John avatar
    28 posts
    Member since:
    Mar 2010

    Posted 08 Nov 2012 Link to this post

    Hi Slav,

    I had a RadAjaxPanel around the RadDock.  When I remove the RadAjaxPanel as you suggested, it displays properly.  However, I am unable to "close" the modal on the server side.  Referring to the screenshot I attached in my previous post, the modal popup has 3 buttons, OK, Close, and Clear.

    Close is a javascript function that calls _dock.disableModalExtender(); and this works.  

    Ok and Clear are both postback functions that validates the input on the modal popup and calls rdEdit.Closed = true; when the validation is ok.  I previously wrapped a RadAjaxPanel around the RadDock and added triggers on the Ok and Clear button to get the RadDock to close.  However, since I've removed that RadAjaxPanel, the calls from the server rdEdit.Closed = true; are not updating the RadDock as before.  Any suggestions?

    John
  11. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 13 Nov 2012 Link to this post

    Hello John,

    Please note that the button you click updates only the content of the RadDock and any changes you make to its properties will not be applied. To achieve this you should exclude the button from the RadAjaxPanel through the approaches described in this help article.

    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.
  12. John
    John avatar
    28 posts
    Member since:
    Mar 2010

    Posted 13 Nov 2012 Link to this post

    Is there a way to Ajaxify the server side close instead of a postback?

    John
  13. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 16 Nov 2012 Link to this post

    Hi John,

    In order to set the RadDock as updated control, you need to wrap it in an UpdatePanel. This is possible only if the dock is docked, otherwise the control is a direct child of the form thus it cannot be placed in an UpdatePanel. If you insert the dock in a RadDockZone, however, it will not possible to use it as a popup.

    A possible solution in this case is to disable the postback of the button in the dock and to use its client-side click event to call the set_closed method of RadDock, described in this help article. You can find more information about referencing the dock on the client and using its client-side API here.

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017