radAlert with Autosize

7 posts, 0 answers
  1. Fede Gen
    Fede Gen avatar
    1 posts
    Member since:
    Mar 2010

    Posted 12 Apr 2010 Link to this post

    Hi, i have the Autosize property in windowmanager and works fine with my custom dialogs.
    But it doesn't work with RadAlert dialog.

    Is there any way to use the autosize with radalert? Maybe something with alerttemplate?

  2. Georgi Tunev
    Georgi Tunev avatar
    7207 posts

    Posted 15 Apr 2010 Link to this post

    Hello Fede,

    Currently the RadWindowManager's popups (radalert, radprompt and radconfirm) do not support such feature. I logged this as a feature request in our PITS and updated your points.

    Kind regards,
    Georgi Tunev
    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. DevCraft R3 2016 release webinar banner
  4. Shark75
    Shark75 avatar
    32 posts
    Member since:
    Apr 2007

    Posted 05 Mar 2014 Link to this post


    Anyway you can think of to do this manually?
  5. Shark75
    Shark75 avatar
    32 posts
    Member since:
    Apr 2007

    Posted 05 Mar 2014 in reply to Shark75 Link to this post

    Ah, a lot more digging in the forums and I found this post where the reply from Svetlina Anati shows you how to resize the alert/confirm/prompt dialogs...

  6. Marin Bratanov
    Marin Bratanov avatar
    3562 posts

    Posted 06 Mar 2014 Link to this post


    To elaborate on the case - the three predefined dialogs RadWindowManager offers are not optimized for autosizing, and to make things harder - text does not provide dimensions the dialogs can autosize against, text flows according to its container, wherein the obvious contradiction lies.

    Nevertheless, a bit of custom code can create an effect similar to autosizing. The key to this would be to calculate the offsets longer content creates so that you can set them to the dialog. Note that some initial dimensions would be needed in any case, because they are responsible for creating the initial overflow. Here follows an example with explanations:
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server"
    <asp:Button ID="Button1" Text="open alert and autosize it" OnClientClick="someAlert(); return false;"
                runat="server" />
    <script type="text/javascript">
        function someAlert()
            var msg = "";
            //first content type - pure text
            for (var i = 0; i < 50; i++) {
                msg += "lorem ipsum dolor sit amet ";
            //try with different content that follows the autosizing guidelines:
            //var msg = "<div style='width: 400px; height: 400px; background: yellow;'>lorem ipsum dolor sit amet</div>";
            //if no dimensions at all are provided initially pure text behavior may be a bit erratic
            //because it flows freely and does not create layout. Thus ,the default 280px width
            //will be used as width base
            var oA = radalert(msg/*, 430, 200*/);
        function autosizePredefinedDialogs(sender, args) {
            if (sender._isPredefined) {
                var contentElement = sender.get_contentElement();
                var height = contentElement.offsetHeight;
                var width = contentElement.offsetWidth;
                /* add to the size to accommodate the rest of the elements in the dialog */
                sender.setSize(width + 16, height + 75);

    Note that this will not work with the Lightweight rendermode, because it sets dimensions to different elements

    Generally, these dialogs are not designed to autosize, yet you can also consider doing a simple character count check and if it is above a certain threshold - simply use a second set of dimensions that are larger, e.g.:
    <asp:Button ID="Button1" Text="open alert and autosize it" OnClientClick="someAlert();
            return false;" runat="server" />
    <script type="text/javascript">
        function someAlert()
            var msg = "";
            /* change the loop to 20 or 50 to emulate long texts */
            for (var i = 0; i < 10; i++)
                msg += "lorem ipsum dolor sit amet ";
            var width = null;
            var height = null;
            if (msg.length > 300)
                width = 430;
                height = 280;
            if (msg.length > 1300)
                width = 550;
                height = 400;
            radalert(msg, width, height);

    where these dimensions can be tested for a couple of minutes until the results are satisfactory, the numbers I used here are almost random.

    Marin Bratanov

    DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

  7. Shark75
    Shark75 avatar
    32 posts
    Member since:
    Apr 2007

    Posted 06 Mar 2014 Link to this post

    That was a very useful post Marin, thanks.
    It got me onto what I think is my final solution. I calculate the size of the text (up to a maximum size) by creating a span in the DOM (with the right css classes) to calculate the size of the text and then setting the size of the window using them. I had to calculate the magic offsets through the debugger and a calculator.
    function getPopupWindowSize(alertMessage, width, height)
        // Create a new span to caclulate the size that the text will be.
        var spn = document.createElement('span');
        // Set the span's innards to the text in the message.
        spn.innerHTML = alertMessage;
        // Set the class name to that we are going to use on the real window.
        spn.className = 'RadWindow_CMS rwDialogText';
        // Append the span to the page (so it can render to get sizes).
        // Get the width and height (up to a pre-defined max),
        // taking into account the size of the rest of the window contents.
        width.value = spn.offsetWidth + 90 < 350 ? spn.offsetWidth + 90 : 350;
        height.value = spn.offsetHeight + 95 < 120 ? spn.offsetHeight + 95 : 120;
        // Remove the span from the page (as we don't actually want to see it!).
    function showAlert(dialogTitle, alertMessage)
        // Create variables to put the calculate sizes into.
        var width = { value: 0 };
        var height = { value: 0 };
        // Calculate the right size for the window (up to a maximum).
        getPopupWindowSize(alertMessage, width, height);
        // Show the alert window.
        radalert(alertMessage, width.value, height.value, dialogTitle);
  8. Sunil
    Sunil avatar
    224 posts
    Member since:
    Jan 2004

    Posted 06 Dec 2014 Link to this post

    This is an old post, but I thought I would post how I solved the autosizing of the standard dialog boxes of radalert, radconfirm and radprompt. I have shared my solution in the following code library: Auto-size standard dialogs of RadAlert, RadPrompt and RadConfirm.

Back to Top
DevCraft R3 2016 release webinar banner