Possible bug with window using Visible(false)

[Brian Roth]

Hi,

We're starting to play with the MVC beta and liking what we're seeing so far.  But I think I may have found a bug with the window control.  If you default the visible state to false the window as well as the content get styled to display:none.  It seems like the display: none never gets removed from the content section when the window is activated.  All I see in the UI is the title bar of the window.  I ran into this in my application and was able to reproduce it on one of the demo pages.  In the actions.cshtml page I added .Visible(false) like so:

@(Html.Kendo().Window()

    .Name("window")

    .Title("About Josef Hoffmann")

    .Actions(actions => actions

        .Custom("custom")

        .Minimize()

        .Maximize()

        .Close()

    )

    .Content(@<text>

        <div class="armchair">

            <img src="@Url.Content("~/Content/web/window/kubus-armchair.png")"

                    alt="Josef Hoffmann - Kubus Armchair" />

            Josef Hoffmann - Kubus Armchair

        </div>

 

        <p>

            Josef Hoffmann studied architecture at the Academy of Fine Arts in Vienna,

            Austria, under Art Nouveau architect Otto Wagner, whose theories of functional,

            modern architecture profoundly influenced his works, and in 1896 he joined his office.

        </p>

 

        <p>

            In 1898, he established his own practice in Vienna. In 1897, inspired by Mackintosh

            and the Glasgow School, he was one of the founding members with Gustav Klimt, of an

            association of revolutionary artists and architects, the Vienna Secession.

        </p>

 

        <p>

            In 1903, he founded with architects Koloman Moser and Joseph Maria Olbrich, the Wiener

            Werkstätte for decorative arts.

        </p>

 

        <p>

            They aspired to the renaissance of the arts and crafts and to bring more abstract and

            purer forms to the designs of buildings and furniture, glass and metalwork, following

            the concept of total work of art. Hoffman's works combined functionality and simplicity

            of craft production with refined and innovative ornamental details and geometric

            elements. He is an important precursor of the Modern Movement and Art Deco.

        </p>

 

        <p>

            Source:

            <a href="http://www.senses-artnouveau.com/biography.php?artist=hof" title="About Josef Hoffmann">http://www.senses-artnouveau.com/<;/a>

        </p>

    </text>)

    .Draggable()

    .Resizable()

    .Visible(false)

    .Width(500)

)

 

<span id="undo" class="k-button">Click to open the window</span>

 

<script>

    $(document).ready(function() {

        var dialog = $("#window");

 

        $("#undo").bind("click", function() {

            dialog.data("kendoWindow").open();

        });

 

        dialog.data("kendoWindow").wrapper.find(".k-custom").click(function(e){

            alert("Custom action button clicked");

            e.preventDefault();

        });

    });

</script>

 

<style scoped>

    #example {

        min-height:500px;

    }

         

    .armchair {

        float: left;

        margin: 20px 30px;

        text-align: center;

    }

         

    .armchair img {

        display: block;

        margin-bottom: 10px;

    }

</style>

Let me know if there's something I'm doing wrong or if this indeed is an issue with the kendo code.  Thanks!

Regards,
Brian Roth

[Alex Gyoshev]

Hello Brian,

Indeed, this is a problem with Kendo itself (initializing a window from a hidden <div>). We will address the issue for the next release. Your Telerik points have been updated for the bug report.

Kind regards,
Alex Gyoshev
the Telerik team

[Eric]

Alex, what is the proper workaround for now?  I've tried a few things like manually showing the content but it doesn't display.

Thanks
Eric

[Eric]

OK, got something working.  I just surrounded the extension declaration with a hidden div and show/hide that instead.   The window itself is set to be visible in it's definition.

[Brian Roth]

Hi Alex,

I tested this with the Beta release and it looks like it's fixed (mostly).  Thanks for that!  The one issue I'm still having is that for a window where I have a kendo DropDownList control on it, the DropDownList still does not show.  Any ideas of things I can try in order to fix this?

Thanks,
Brian

[Don]

Just wanted to share a simple workaround that worked for me in case it helps anyone:

Originally, I had this in my code to show the window:

$('#myWin').data('kendoWindow').open().center().toFront();

As mentioned in this thread, the title would show but not the content.  Changing it to this made it work:

$('#myWin').show().data('kendoWindow').open().center().toFront();

[Dan]

I'm using kendoui.aspnetmvc.2012.3.1114.commercial (and why doesn't the account show what version I bought?)

UPDATE: This issue was that my ContentPages contained additional jquery script includes. When I removed them, then it started working.

This is very frustrating. I still can't get this to work...

        @Html.Kendo().Window().Name("window").Title("Create Profile").Draggable().LoadContentFrom("Create", "Home").Visible(false)

        <a id='createProfile' href='#'>Add One</a>
        <script type="text/javascript">
            $("#createProfile").click(function () {
                $("#window").show().data("kendoWindow").open().center().toFront();
                alert('end');
            });

More information... It's failing on LoadContentFrom( ).

I've tried ActionResult and PartialViewResult with no luck. 

Any ideas?

 

public ActionResult Create()

      {

          return View();

      }

[kurt place]

It seems that I am seeing this as well.  I have a kendo window in an ascx file.  There are 2 on the page, one that starts visible and the other not until later it is shown programmatically.  When the window from the first control is shown then the content is visible.  However when I have the window from the second control the content's div is marked as visibility: hidden; and does not show.

[Dimo]

Hello Kurt,

If there is a <div> with a visibility:hidden style inside the Window content, then you need to remove this style yourself, e.g. in the show event. The Window does not manage the styling of its content in any way.

Generally, this visibility style is not needed at all, because a Window widget with a .Visible(false) setting will be rendered with a display:none style, so none of its descendant elements will be visible. The display:none style will be removed by the widget automatically upon opening.

Regards,
Dimo
Telerik

[Versile]

This bug still exists today in 2025 (10 years) as if it's 2015. I'm upgrading an application to the latest versions of .NET, Telerik, etc. if I start my window as Visible(false) the actual content has k-hidden added to it and never shows. Inspector shows it.

@(Html.Kendo().Window()
    .Name("ContentWindow")
    .Content("<div id='ContentWindowDiv'>TestContent</div>")
    .Modal(true)
    .Visible(false)
    .Draggable(true)
    .Events(ev => ev.Close("OnContentWindowClose"))
)

Javascript

$('#ContentWindow').data('kendoWindow').title('Delete Request').center().open();

I'm able to bypass it by adding this css class to my main application. Since the window is also set to k-hidden when not open it works nicely.

.k-window > .k-window-content {
    display: block !important;
}

[Anton Mironov]

Hi Versile,

Thank you for the code snippets, images, and the details provided.

I made a couple of tests on my side with your code and the result is the expected one:

Here is a REPL example:

• https://netcorerepl.telerik.com/QTubQLbG071uMATX02

Feel free to test the REPL example on your side and let me know if this is the desired result.

Kind Regards,
Anton Mironov