Dinamically changing the Height of a Window

[mvbaffa]

Hi,

I have a modal window that is initially displayed with a ViewUserControl in its content. In fact this is a classic Logon Control asking for user and password. The User Control is like this:

<%

 

@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

 

<% Html.Telerik().Window()

.Name(

 

 

"logonWindow")

 

.Title(

 

 

"xxx - 1.0")

 

.Icon(Url.Content(

 

 

"~/Content/img/16/toolbox.png"), "toolbox")

 

.Draggable(

 

 

true)

 

.Scrollable(

 

 

false)

 

.Resizable()

.Modal(

 

 

true)

 

.Visible(

 

 

false)

 

.Content(()=>

{

%>

<%

 

 

using( Html.BeginForm( "LogOn", "User" ) ) { %>

 

 

 

 

<table id="tableDialog">

 

 

 

 

<tr height="25">

 

 

 

 

<td align="right" class="ui-widget">

 

 

User:

 

 

</td>

 

 

 

 

<td class="ui-widget">

 

 

<%

 

= Html.TextBox( "txtUser" ) %>

 

 

 

 

</td>

 

 

 

 

</tr>

 

 

 

 

<tr height="25">

 

 

 

 

<td align="right" class="ui-widget">

 

 

Password:

 

 

</td>

 

 

 

 

<td class="ui-widget-input">

 

<%

 

 

= Html.Password( "txtPassword" )%>

 

 

 

 

</td>

 

 

 

 

</tr>

 

 

 

 

<tr id="trSeparator1" style="height: 5px"></tr>

 

 

 

 

<tr id="trFirstTimeMessage" height="25">

 

 

 

 

<td class="ui-widget" colspan="2">

 

 

This is your firsta access.

 

<br />

 

 

Please change your Password.

 

 

</td>

 

 

 

 

</tr>

 

 

 

 

<tr id="trSeparator2" style="height: 5px"></tr>

 

 

 

 

<tr id="trNewPassword" height="25">

 

 

 

 

<td align="right" class="ui-widget">

 

 

New

 

&nbsp;<br />Password:

 

 

 

 

</td>

 

 

 

 

<td style="font-size: 11px">

 

<%

 

 

= Html.Password( "txtNewPassword" )%>

 

 

 

 

</td>

 

 

 

 

</tr>

 

 

 

 

<tr id="trConfirPassword" height="25">

 

 

 

 

<td align="right" class="ui-widget">

 

 

Confirm your

 

&nbsp;<br />Password:

 

 

 

 

</td>

 

 

 

 

<td class="ui-widget">

 

 

<%

 

= Html.Password( "txtConfirmPassword" )%>

 

 

 

 

</td>

 

 

 

 

</tr>

 

 

 

 

<tr height="20">

 

 

 

 

<td colspan="2" align=right>

 

 

 

 

<div id="submitButton" width="100%">

 

 

 

 

<span id="divBtnLogOn"><input id="btnLogon" type="submit" value="LogOn" class="t-button" /></span>

 

 

 

 

<span><img id="loadingPanel" alt="running" class="t-loading" style="display: none" /></span>

 

 

 

 

</div>

 

 

 

 

</td>

 

 

 

 

</tr>

 

 

 

 

<t>

 

 

 

 

<td colspan="2">

 

 

 

 

<div id="logMsg" class="errorMsg" />

 

 

 

 

</td>

 

 

 

 

</tr>

 

 

 

 

</table>

 

 

<% } %>

<%

})

.Render();

%>

Some input fields were initially hidden using jQuery. Like this:

var

 

 

jqWindow = jQuery('#logonWindow');

 

jQuery(

 

'#trSeparator1').hide();

 

jQuery(

 

'#trMensagemPrimeiraVez').hide();

 

jQuery(

 

'#trSeparator2').hide();

 

jQuery(

 

'#trNovaPassword').hide();

 

jQuery(

 

'#trConfirmePassword').hide();

 

 

 

 

 

The window is displayed initially OK. The window assumes width and height correctly and only User and Password area displayed.

The hidden fields must be displayed if some conditions occur. I Simply show the input fields like this:

var

 

 

jqWindow = jQuery('#logonWindow');
jQuery('#trSeparator1').show();

 

jQuery(

 

'#trMensagemPrimeiraVez').show();

 

jQuery(

 

'#trSeparator2').show();

 

jQuery(

 

'#trNovaPassword').show();

 

jQuery(

 

'#trConfirmePassword').show();

 

When I execute these commands I expected the window to automatically extend it's height to show them. But this does not occur.

Then I tried to force a new height before the commands to show the fields like this:
 
var jqWindow = jQuery('#logonWindow');

 

jqWindow.height(

 

'300');

 

 

 

When I do this the window height is really extended but the area where the fields should be displayed remains blank. Its like there were no fields there. The window hieght is extended but the fields were not displayed.

What must I do ???

Thanks in advance

[nachid]

you can easily achieve this with Jquery
Search this forum for samples

[mvbaffa]

Hi, Thanks for your answer,

I am using jQuery. To initially hide the controls and after that to show the controls.

The problem is that when I show the controls the window does no extend, as the ASP.NET AJAX version of the window does.

As far as it is not working this way I tried, using jquery height,  to extend the height of the window before showing the controls. In fact the window height is changed but the area that might have the controls remais blank. It seems that the window is not refreshing is client area.

Can you be more specific. Where can I find such samples. I could find nothing like this in the  demos.

Thanks

[David]

The current version of the fx.zoom animation sets an explicit height and width on the window after the animation finishes, this stops the window from growing.

The $.telerik.fx.zoom animation is created inside telerik.window.js.

$t.fx.zoom.prototype = {
    play: function (options, end) {
        var $element = this.element.show();

        var resizeElement = $element.find('> .t-window-content');

        var endValues = {
            width: resizeElement.width(),
            height: resizeElement.height(),
            left: parseInt($element.css('left')),
            top: parseInt($element.css('top'))
        };

        $element
            .css({
                left: endValues.left + 20,
                top: endValues.top + 20
            })
            .animate({
                left: endValues.left,
                top: endValues.top
            }, options.openDuration);

        resizeElement
            .css({
                width: endValues.width - 40,
                height: endValues.height - 40
            })
            .animate({
                width: endValues.width,
                height: endValues.height
            }, options.openDuration);
    },

    rewind: function (options, end) {
        var $element = this.element;

        var resizeElement = $element.find('> .t-window-content');
        var endValues = {
            width: resizeElement.width(),
            height: resizeElement.height(),
            left: parseInt($element.css('left')),
            top: parseInt($element.css('top'))
        };

        resizeElement.animate({
            width: endValues.width - 40,
            height: endValues.height - 40
        }, options.closeDuration);

        $element.animate({
            left: endValues.left + 20,
            top: endValues.top + 20
        }, options.closeDuration, function () {
            $element.css({
                left: endValues.left,
                top: endValues.top
            }).hide();

            resizeElement.css({
                width: endValues.width,
                height: endValues.height
            });

            if (end) end();
        });
    }

In both cases in the animation callback the width should be set to inherit.  In our case we aren't setting a height or width to the window and want it to resize as elements are hidden and shown.  This fix probably won't honor any explicit height and widths that were set when the window was created.

How we fixed it was to add a call back to the play animation:

resizeElement
    .css({
        width: endValues.width - 40,
        height: endValues.height - 40
    })
    .animate({
        width: endValues.width,
        height: endValues.height
    }, options.openDuration, function ()
    {
        resizeElement.css({ width: 'inherit', height: 'inherit' });
    });

rewind animation:

$element.animate({
    left: endValues.left + 20,
    top: endValues.top + 20
}, options.closeDuration, function ()
{
    $element.css({
        left: endValues.left,
        top: endValues.top
    }).hide();

    resizeElement.css({
        width: 'inherit',
        height: 'inherit'
    });

    if (end) end();
});

You can overwrite the telerik.window.js but I'd recommend replacing the function with a new version elsewhere in code so when updating telerik code you don't accidentally trump any changes.

[Craig]

I am encountering the same problem as described below.  How do I replace the function as described by David to have my window automatically resize when new elements are displayed in the modal window?