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

Center radalert/radprompt/radconfirm with large content

7 Answers 166 Views
Window
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Veteran
Ron asked on 11 Nov 2010, 10:21 AM
We're using the radalert, radprompt and radconfirm windows to replace the browser's default dialogs. The problem we're experiencing is when providing  text to these windows that is larger then expected. The windows do size nicely vertically. The trouble is that the windows do not get centered correctly. When calculating the height of the window, it seems that the default given size is used instead of the actual size of the windows.

So let's say I open a radalert with width=300 and height=200. Due to the large content provided to the radalert window, the height of the window in effect becomes larger than 200, say 350. As a result the radalert gets centered correctly horizontally, but it's off-centre vertically. It looks like the calculation of the position still uses a height of 200 instead of the actual 350. I have digged into the code and tried to manually fix this, but I can't figure out how to do it. Any suggestions?

7 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 11 Nov 2010, 04:22 PM
Hi Ron,

 I suggest to test whether the following resolves the problem:


1) Add a show handler by using the add_show syntax
2) In the show handler call the method center() for the sender which will be your dialog.


The above should work, let me know how it goes.


Kind regards,
Svetlina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ron
Top achievements
Rank 1
Veteran
answered on 11 Nov 2010, 04:44 PM
Thank you for your response Svetlina. How would I add a show handler to a radalert? As far as I know the radalert return the window, but by that time it's already shown. However that may be, I have tried adding the handler after radalert returns the window and showing the alert window again. The showhandler gets called then and I call center on the sender (the window). But it doesnt do anything. It looks something like this.

var wnd = radalert('Replace this witha huge amount of text', 300, 100);
wnd.add_show(showhandler);
wnd.show();
  
function showhandler(sender, eventArgs) {
    sender.center();
    alert('centered?');
}

Obviously I have tried call wnd.center() after the radalert function returns, but that doesn't help either. When I dig through the source or debug the javascript, it really looks like the height that is providing at the radalert() call is used no matter what. Am I missing something? If so, could you provide me with a piece of working sample code?

Thank you!
0
QualiWareUA
Top achievements
Rank 1
answered on 12 Nov 2010, 09:05 AM
Hi,

I have the same problem. Any suggestions will be appreciated.
0
Svetlina Anati
Telerik team
answered on 16 Nov 2010, 12:33 PM
Hello guys,

 I examined the setup further and it turned out that the radalert code calculates the central bounds based on the size. If you do not provide explicit size, however, it sets default one and thus the centering is not correct.

To get the desired result, you should set size. I understand that you may not know it when opening teh alert and thus I suggest to use the following code which gets it from the content element size:

<%@ Page Language="C#" %>
  
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
  
        function callAlert()
        {
            var oAlert = radalert("test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/> test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>test content  <br/>");
            resizePopup(oAlert);
            oAlert.center();
        }
  
        function resizePopup(oAlert)
        {
            var contentElement = oAlert.get_contentElement();
            var height = contentElement.offsetHeight;
            var width = contentElement.offsetWidth;
            oAlert.setSize(width, height);
        }
    </script>
    <button onclick="callAlert();return false;">
        test
    </button>
    <telerik:RadWindowManager ID="mng" runat="server">
    </telerik:RadWindowManager>
    </form>
</body>
</html>

Please, tets this solution and let me know how it goes.

Regards,
Svetlina
the Telerik team
Browse the vast support resources we have to jumpstart 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
Ron
Top achievements
Rank 1
Veteran
answered on 16 Nov 2010, 12:59 PM
Hi Svetlina, works like a charm for me. Thank you for your help!
0
raj
Top achievements
Rank 1
answered on 20 Aug 2015, 05:23 PM

function openPrompt(promptTitle, callbackFn, serverCallbackResponse) {
    // debugger;
    promptServerCallbackResponse = serverCallbackResponse;
    var prompt = radprompt(promptTitle, callbackFn);
    prompt.add_show(centerHandler);
    prompt.show();

}

function centerHandler(sender, eventArgs) {
    debugger;
    sender.center();
}

 

 

 

 

 

this is my code...still did not work..did i do any mistake

0
Eyup
Telerik team
answered on 24 Aug 2015, 11:38 AM
Hi Raj,

You can try to delay the center method if you have a lot of content loading:
http://www.w3schools.com/jsref/met_win_settimeout.asp

Please give it a try and let me know if it works for you.

Regards,
Eyup
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Window
Asked by
Ron
Top achievements
Rank 1
Veteran
Answers by
Svetlina Anati
Telerik team
Ron
Top achievements
Rank 1
Veteran
QualiWareUA
Top achievements
Rank 1
raj
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or