Correct way to resize a modal window automatically?

[paul]

Hi.

I have just started to play about with the telerik controls and I am swapping over using the standard jQuery UI dialog with the telerik one. Basically, when I click on a link it brings up the telerik modal window that only consists of a loading gif. The control then makes an AJAX call to get the contents of the window. These then replace the loading gif. However, the size does not expand on the window for the new content. How can I do this? Is it a manual job? Or can it be done to autosize?

The content coming back is a number of div containers, that only 1 is shown at a time. So the window will show div1, then upon doing something in it, it hides div1 and shows div2 etc. Basically like a wizard.

Code as follows:

Window:

@(Html.Telerik().Window()
            .Name("CreateUserWizard")
            .Title("Create User Wizard")
            .Content(@<img src="@Url.Content(Links.Content.images.ajaxLoading_gif)" alt="loading" class="ui-loading-icon" />)
            .Buttons(buttons => buttons.Close())
            .Width(450)
            .Draggable(false)
            .Modal(true)
            .Visible(false)
            .Height(280)
            )

Function to open window:

function openWindow() {
        var window = $("#CreateUserWizard").data("tWindow");
        window.center().open();
        window.ajaxRequest('@Url.Action(MVC.User.User.ActionNames.CreateUserWizard)?BusinessUnitId=' + $('#BusinessUnitId').val());
    }

Thanks, Paul.

[paul]

As you will see, I have a height set on the window just now, if I dont do that, then the window is tiny (due to the only having the loading gif to start with), and contains scroll bars.

[paul]

Can anyone shed any light on this? Is it even possible? Or should I be looking at hacks with jQuery to try and do it? If that was possible.

[Dimo]

Hi Paul,

As you have observed, the Window resizes itself automatically if you remove the explicit width and height settings. If you want to have some dimensions, but only initially, then use the Window's refresh client event to remove the width and height styles from div.t-window-content.

All the best,
Dimo
the Telerik team

[paul]

Hi.,

This was not what I was after.

Basically, when thee window opens, if I don't set a height/width, then the window will be very small, as the only content it has is the loading gif. With the ajax request in my function "OpenWindow()", it loads other content into the window, but it will not resize the window so that it is big enough for the new content. How would I do this?

[Dimo]

Hi Paul,

Actually the problem is caused by a combination of two things:

1. The Window is initially hidden. When the component is hidden, its current width and height are always set to pixel values, so that they can be the same when it is opened.

2. You first open the Window with its already set dimensions, then you load new content.

You options in this case are:

a) remove the set width and height with Javascript and a timeout in the OnRefresh event.

b) create the Window on the client

<div id="CreateUserWizard"></div>

<button type="button" onclick="openWindow()">open Window</button>

<script type="text/javascript">

function openWindow() {
    var win = $("#CreateUserWizard").tWindow({title:"My Window"}).data("tWindow");
    win.ajaxRequest('....url.....');
    win.center().open();
}

</script>

Regards,
Dimo
the Telerik team

[paul]

I am fine to change this to create on the client side as you have shown if that is what is needed. However, will this only show the window once fully loaded with the content? Rather than showing it with a loading gif, which then resizes once the new content is loaded?

[Dimo]

Hi Paul,

You can switch the places of the open and ajaxRequest lines to show a loading image first. Place the loading image in the static <div id="CreateUserWizard">.

Best wishes,
Dimo
the Telerik team

[paul]

The problem here, is that the ajax request I want is the full form.

Are you meaning do something like this?

function openWindow() {
    var win = $("#CreateUserWizard").tWindow({title:"My Window"}).data("tWindow");
    win.ajaxRequest('....url to loading gif.....');
    win.center().open();
    win.ajaxRequest('....url to form.....');
}

Would this be the correct way to initially show a loading gif, and then load the form, with it resizing?

[Dimo]

Hello Paul,

As I said in my previous message, you can place the loading image as static content inside the <div> from which you create a Window. The first Ajax request is not needed.

Regards,
Dimo
the Telerik team

[paul]

Hi.

I think I get what you mean now. It will now resize perfectly. However, for some reason the initial show (for roughly 1 second) shows nothing, when it should show the loading gif. Here is how I create and show it:

function OpenCreateUserWizardWindow() {

        var CreateUserWizardWindow = $.telerik.window.create({
            name: "CreateUserWizard",
            title: "Create User Wizard",
            content: '<img src="@Url.Content(Links.Content.images.ajaxLoading_gif)" alt="loading" class="ui-loading-icon" />',
            modal: true
        });

        var window1 = $(CreateUserWizardWindow).data('tWindow');
        window1.center().open();
        window1.ajaxRequest('@Url.Action(MVC.User.User.ActionNames.CreateUserWizard)?BusinessUnitId=' + $('#BusinessUnitId').val());
    }

If I force the height and width to be 200, then it shows a blank window, as if it can't display the initial content. Nothing has changed with the image, location etc.

Thanks, Paul.

[paul]

Having looked at the html, it has not put anything in as the content. Is the way I am adding the initial content correct?

i.e. the following taken from the above creation:

content: '<img src="@Url.Content(Links.Content.images.ajaxLoading_gif)" alt="loading" class="ui-loading-icon" />',

[paul]

The issue was with the code:

content: '<div class="formdiv"><img src="@Url.Content(Links.Content.images.ajaxLoading_gif)" alt="loading" class="ui-loading-icon" /></div>',

I changed it to:

html: '<div class="formdiv"><img src="@Url.Content(Links.Content.images.ajaxLoading_gif)" alt="loading" class="ui-loading-icon" /></div>',

So it will now show the content for the loading gif, and then change the content with the ajax request and resize.

This still does not change the position of the window however. Once the content is loaded, the window becomes a lot larger. Is there a way to centre a window that is already on the screen? Can I call the .center() method on a window after an ajaxrequest? If so, how would I get it to centre only once the ajaxrequest is complete?

[Trent]

Hi there. Did you ever resolve this? I'd also like to know how to centre the window in this situation.

Thanks!