Dynamically resize modal window

[Craig]

I have a modal window that displays correctly.  However the content of the modal window has optional data fields for the user to enter.  This optional data is not displayed until they click a link on the page and the inputs are shown via jquery.toggle.  I would like the modal window to resize to the now visible content on the page. 

How do I get the modal window to resize to the content when a user clicks on a specific link?

Thanks.

[Hristo Germanov]

Hello Craig,

Thank you for contacting us.

1. If you want window to resize to the visible content you need to remove width() and height() from the window.
2. You could set different width and height to the window client-side.
Code snippet:

function resizeWindow() {
   var element = $("#Window").data("tWindow").element;
   $(element).find(".t-content").width(400).height(400);
}

All the best,
Hristo Germanov
the Telerik team

[Craig]

I do not have height or width set on the original window size

The resizeWindow function you have defined below doesn't work for me because the resize request takes place within the modal window not within the page containing the modal window.

The Modal Window calls LoadContentFrom("Create", "Telephone")
Within the Create.cshtml page there is a jquery.toggle call to show/hide optional data for the page.
When the jquery.toggle call is made I would like the Modal Window to dynamically resize to the content of the page it is loading.

Page containing Modal Window

<fieldset>
    <legend>Person</legend>
    @{ Html.Telerik().Window()
        .Name("TelephoneWindow")
        .Visible(false)
        .Title("Add Telephone")
        .Draggable(true)
        .Resizable(resizing => resizing
            .Enabled(true)
        )
        .Modal(true)
        .Buttons(b => b.Maximize().Close())
        .LoadContentFrom("Create", "Telephone", new {entityID = Model.EntityID})
        .Render();
}
    <div class="display-label">FirstName</div>
    <div class="display-field">@Model.FirstName</div>

    <div class="display-label">MiddleName</div>
    <div class="display-field">@Model.MiddleName</div>

    <div class="display-label">LastName</div>
    <div class="display-field">@Model.LastName</div>

    <div class="display-label">Prefix</div>
    <div class="display-field">@Model.Prefix</div>

    <div class="display-label">Suffix</div>
    <div class="display-field">@Model.Suffix</div>

    <div class="display-label">Salutation</div>
    <div class="display-field">@Model.Salutation</div>

    <div class="display-label">Title</div>
    <div class="display-field">@Model.Title</div>

    <div class="display-label">PrimaryTelephoneID</div>
    <div class="display-field">@Model.PrimaryTelephoneID</div>

    <div class="display-label">EntityTypeId</div>
    <div class="display-field">@Model.EntityTypeId</div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { id=Model.EntityID }) |
    @Html.ActionLink("Back to List", "Index")
</p>


@{ Html.Telerik().ScriptRegistrar()
        .OnDocumentReady(@<text>
            var windowElement = $('#TelephoneWindow');
            var undoButton = $('#addTelephone');
            undoButton
                .bind('click', function(e) {
                    windowElement.data('tWindow').open();
                    undoButton.hide();
                })


            windowElement.bind('close', function() {
                undoButton.show();
            });
        </text>);
}

<span id="addTelephone" class="t-group">Add Telephone</span>

Here is the content contained within the Modal Window.  I would like the Modal Window to resize based on hiding or showing the "NotesArea" <div>

@using (Html.BeginForm())
{

    <br />

    <table class="align">
        <tr>
            <td><label>Phone Type</label></td>
            <td>
                 @Html.DropDownListFor(model=>model.Telephone.TelephoneType , new SelectList(Model.TelephoneTypes, "TelephoneTypeID", "Name", Model.TelephoneTypes[0]))
           </td>
        </tr>

        <tr>
            <td><label>Phone Number</label></td>
            <td>@Html.EditorFor(model => model.Telephone.Number, new { style = "width:100px;" })</td>
        </tr>
        <tr>
            <td>Extension</td>
            <td>@Html.EditorFor(model => model.Telephone.Extension, new { style = "width:100px;" })</td>
        </tr>
        <tr>
            <td><label>Primary Phone</label></td>
            <td>@Html.CheckBoxFor(model => model.IsPrimary)</td>
        </tr>
        <tr>
            <td><label id="showNotes">Add Note</label></td>
            <td></td>
        </tr>

    </table>
    @Html.HiddenFor(model => Model.EntityID)


    <div id="NotesArea">
        @(Html.Telerik().EditorFor(model=>model.Description)
                            .Name("Description")
                            .Tools(tools => tools
                                .Clear()
                                .Bold()
                                .Italic()
                                .Underline()
                                .Strikethrough()
                                .BackColor()
                                .FontColor()
                                .JustifyLeft()
                                .JustifyCenter()
                                .JustifyRight()
                                .InsertUnorderedList()
                                .InsertUnorderedList()
                                .CreateLink()
                                .InsertImage()
                                )

                    )
    </div>
    <p>
        <input type="submit" value="Save" />
    </p>

}
<script type="text/javascript" >
$(document).ready(function () {
             $("#NotesArea").hide();

         });

         $('#showNotes').click(function () {
             $("#NotesArea").toggle(400); //Make the modal window resize somehow
         });
         </script>

[Hristo Germanov]

Hi Craig,

You can try this workaround:

$('#showNotes').click(function () {
    var windowElement = $('#TelephoneWindow').data('tWindow').element;

    $(windowElement).find(".t-window-content").css("height", "auto").css("width", "auto");

    $("#NotesArea").toggle();
});

All the best,
Hristo Germanov
the Telerik team

[Craig]

Thanks for the reply!

I modified your code a little and here's what ended up working for me

$(".t-window-content").css("height", "auto").css("width", "auto");
$("#NotesArea").toggle(400);