This is a migrated thread and some comments may be shown as answers.

RadDock as Popup

11 Answers 112 Views
Dock
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 08 Jun 2011, 09:56 PM
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

11 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 13 Jun 2011, 11:40 AM
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.

0
John
Top achievements
Rank 1
answered on 13 Jun 2011, 04:49 PM
Thanks Pero for the code.  Works great!

A quick question..is there a way to center the "popup" relative to the browser?
0
Pero
Telerik team
answered on 14 Jun 2011, 04:17 PM
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.

0
John
Top achievements
Rank 1
answered on 16 Jun 2011, 05:30 PM
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();
}
0
John
Top achievements
Rank 1
answered on 05 Nov 2012, 10:14 PM
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
0
John
Top achievements
Rank 1
answered on 07 Nov 2012, 10:38 PM
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>

0
Slav
Telerik team
answered on 08 Nov 2012, 12:16 PM
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.
0
John
Top achievements
Rank 1
answered on 08 Nov 2012, 04:11 PM
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
0
Slav
Telerik team
answered on 13 Nov 2012, 01:01 PM
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.
0
John
Top achievements
Rank 1
answered on 13 Nov 2012, 04:01 PM
Is there a way to Ajaxify the server side close instead of a postback?

John
0
Slav
Telerik team
answered on 16 Nov 2012, 09:24 AM
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.
Tags
Dock
Asked by
John
Top achievements
Rank 1
Answers by
Pero
Telerik team
John
Top achievements
Rank 1
Slav
Telerik team
Share this question
or