Center radalert/radprompt/radconfirm with large content

8 posts, 0 answers
  1. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 11 Nov 2010 Link to this post

    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?
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 11 Nov 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 11 Nov 2010 Link to this post

    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!
  5. QualiWareUA
    QualiWareUA avatar
    54 posts
    Member since:
    Sep 2008

    Posted 12 Nov 2010 Link to this post

    Hi,

    I have the same problem. Any suggestions will be appreciated.
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Nov 2010 Link to this post

    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.
  7. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 16 Nov 2010 Link to this post

    Hi Svetlina, works like a charm for me. Thank you for your help!
  8. raj
    raj avatar
    1 posts
    Member since:
    Aug 2015

    Posted 20 Aug 2015 in reply to Svetlina Anati Link to this post

    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

  9. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 24 Aug 2015 Link to this post

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