radAlert with Autosize

[Fede Gen]

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?

Thanks.

[Georgi Tunev]

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.

[Shark75]

+1

Anyway you can think of to do this manually?

[Shark75]

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...

[Marin Bratanov]

Hello,

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"
                          OnClientShow="autosizePredefinedDialogs">
</telerik:RadWindowManager>
<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:
        //http://www.telerik.com/help/aspnet-ajax/radwindow-troubleshooting-autosize-not-correct.html
        //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);
            sender.center();
        }
    }
</script>

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);
    }
</script>

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


Regards,
Marin Bratanov
Telerik

[Shark75]

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).
    document.body.appendChild(spn);
    // 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!).
    document.body.removeChild(spn);
}

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

[SUNIL]

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.

[Matthew]

Does anybody have the code that was linked in this post by Sunil??. the link appears to be down

[Peter Milchev]

Hello Matthew,

Can you please share more details on what functionality exactly you are aiming to achieve that the snippets in the thread does not help for? 

Then, we would be able to provide some more specific code snippets or suggestions.

Regards,
Peter Milchev
Progress Telerik