RadDock as Popup

[John]

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

[Pero]

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

[John]

Thanks Pero for the code.  Works great!

A quick question..is there a way to center the "popup" relative to the browser?

[Pero]

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

[John]

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();
}

[John]

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

[John]

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>

[Slav]

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

[John]

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

[Slav]

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

[John]

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

John

[Slav]

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