Dynamically Grow Window

[Mono]

Hello,

I have a basic Window. This Window has a basic Tab Strip. Some of the content in each of the tabs will dynamically appear. When the content appears, the size of the tab dynamically grows, which is what I want. However, the Window stays the same size. Ideally, I would like for the Window height to grow as well. Is there a way to do this? I've included my code below to demonstrate what I'm talking about. Also, is there any support for a maxHeight-esque property?

<input type="button" id="testButton" value="Test" onclick="return testButton_Click();" />

<div id="testDialog">

    <div id="testTabs">

        <ul>

            <li class="k-state-active">Tab 1</li>

            <li>Tab 2</li>

        </ul>

 

        <div>

            <div id="errBanner" style="padding-bottom:8px;">Testing a longer error message. This thing will wrap. There is a chance this will wrap. It should.</div>

            <div>Name</div>

            <input id="nameTextBox" />

            <div>Please enter your name.</div>

        </div>

 

        <div>

            Tab 2 Content

        </div>

    </div>

 

    <input type="button" id="validateButton" value="Validate" onclick="validateButton_Click();" />

</div>

 

<script type="text/javascript">

    $().ready(function () {

        $("#testDialog").kendoWindow({

            visible: false,

            title: "Test",

            minHeight: 150,

            minWidth: 400,

            modal: true,

            open: function () {

                $("#errBanner").hide();

            }

        }).data("kendoWindow");

 

        $("#testTabs").kendoTabStrip({

            animation: { open: { effects: ""} }

        });

    });

 

    function testButton_Click() {

        var dialog = $("#testDialog").data("kendoWindow");

        dialog.center();

        dialog.open();

    }

 

    function validateButton_Click() {

        $("#errBanner").show();

    }

</script>

[Dimo]

Hello Mono,

If you don't specify explicit height to the Window, it will resize automatically, according to its content as long as the user does not resize the widget manually with the mouse. From this moment on the Window will maintain the user-defined size. If you want to change this behavior, you will have to remove the height style from the <div class="k-widget k-window"> element with Javascript at the moment the content inside changes.

Best wishes,
Dimo
the Telerik team