Kendo Window Not Displaying Inside Child Template

[Brian]

I have a Kendo Panel that contains a Tile Layout.  I have 2 hard-coded HTML kendo templates that display and 1 that I am using a Kendo Window which loads a view passing in a model.  The 2 hard-coded ones are displayed fine, but the Kendo Window one is an empty rectangle (see PanelWithTileLayout.jpg).  If I enter a URL of the Kendo Windows content source, it displays fine (see KendoWindowContentWithDirectURL.jpg).  The LoadContentFrom URL is being hit on a breakpoint in the controller.  I was thinking I have to open the Kendo Window in javascript somewhere, but it is not recognized in the document.ready routine, probably because it is in a child template and hasn't been created yet.  

 

<script id="dues-remit" type="text/x-kendo-template">
    @(Html.Kendo().Window()
        .Name("DuesRemission")
        .Width(310)
        .Draggable(false)
        .LoadContentFrom("_DuesRemission", "Dashboard", new { TplNum = ViewBag.TempleNumber })
        .Events(events => events.Close("close"))
        .Visible(true)
        .ToClientTemplate()
    )
</script>

<script id="members" type="text/x-kendo-template">
    <div id="members-border" class="health-border">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
        <div class="info-container">
            <h3 class="temple-health-title">Membership Change</h3>
            <div class="info-holder">
                <div class="item-values">Percent change since last year: -0.5%</div>
                <div class="item-values">Percentile against all temples: 63</div>
            </div>
        </div>
    </div>
</script>

<script id="unapplied-payments" type="text/x-kendo-template">
    <div id="unapplied-payments-border" class="health-border">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
        <div class="info-container">
            <h3 class="temple-health-title">Unapplied Payments</h3>
            <div class="info-holder">
                <div class="item-values">Current number of unapplied payments: 5</div>
                <div class="item-values">Percentile against all temples: 47</div>
            </div>
        </div>
    </div>
</script>

<div class="demo-section k-content container-fluid">
    @(Html.Kendo().TileLayout()
        .Name("temple-health")
        .Columns(3)
        .RowsHeight("150px")
        .ColumnsWidth("510px")
        .Containers(c => {
            c.Add().BodyTemplateId("dues-remit").ColSpan(1).RowSpan(1);
            c.Add().BodyTemplateId("members").ColSpan(1).RowSpan(1);
            c.Add().BodyTemplateId("unapplied-payments").ColSpan(1).RowSpan(1);
        })
        .Reorderable(true)
        .Resizable(true)
    )
</div>

 

_DuesRemission.cshtml:

<div id="dues-remit-border" class="health-border">
    <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
    <div class="info-container">
        <h3 class="temple-health-title">Dues Remission</h3>
        <div class="info-holder">
            <div class="col-lg-6 col-sm-6">Dues Year @Model.CurrentDuesYear</div><div class="item-values col-lg-6 col-sm-6">Percent paid as of today: @Model.PercentPaidCurrentYear</div>
            <div class="col-lg-6 col-sm-6">Dues Year @Model.LastDuesYear</div><div class="item-values col-lg-6 col-sm-6">Percent paid last year: @Model.PercentPaidLastYear</div> 
        </div>
    </div>
</div>

 

There are no errors in the F12 console display.

[Anton Mironov]

Hi Brian,

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

Yes, you are totally correct. The instance of the Window is not founded, because it is still not available in the DOM tree.

In order to use the instance of the Window, I would recommend trying the "Select" Event of the PanelBar. In the Event handler, check if the correct tab is selected, or if the instance of the Window is already available and use it as per the needs of your application.

I hope this information helps.

Let me know if further information or assistance is needed.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov
Progress Telerik

[Brian]

That doesn't seem to work.  I want it to be displayed inside of the tile panel borders.  That is the reason I define the window within the tile div.  When I added a button to click to open the window, the window opens at the top left corner of the screen.  I wanted each tile to have its own datasource, but it looks like I'll have to make HTML within the tile div and have a single datasource for all the tiles, passed into the panel view as a model.  I'm getting kendo not defined.  I don't think the current architecture I've chosen is going to work for me.  I would need the Kendo Window to be opened on creation and to be able to set the parent window as the location/boundary.

<script>

    function onSelectPanel(e) {
        var panelText = $(e.item).find("> .k-link").text();
        if (panelText === "Temple Health")
            $('#DuesRemission').data('kendoWindow').open();
    }

</script>

<div style="margin-top: 5px; margin-bottom: 5px">
    @(Html.Kendo().PanelBar()
        .Name("TemplePagePanel")
        .ExpandMode(PanelBarExpandMode.Multiple)
        .Items(pb =>
        {
            pb.Add()
            .Text("Banner")
            .LoadContentFrom("_Banner", "Temple", new { tplnum = Model.TplNum })
            .Expanded(true);

            pb.Add()
            .Text("Temple Health")
            .LoadContentFrom("_Health", "Temple", new { tplnum = Model.TplNum });
        })
        .Events(e => e.Select("onSelectPanel"))
    )
</div>

[Anton Mironov]

Hi Brian,

Thank you for the additional details provided.

Attached is a sample project that implements the requirements - two static HTML templates and one Kendo UI Window with information from the Model populated.

Feel free to make the needed tests locally with the project attached and let me know if further information or assistance is needed.

Looking forward to hearing back from you.


Kind Regards,
Anton Mironov

[Brian]

My Kendo Window is still not displaying like yours is.  One difference I see is that your Kendo Window has "width" : "310px"; mine says "width" : 310.  That is, yours is text 310px; mine is integer 310.  Is this because of different Kendo UI versions?  Both are using .Width(310) in the MVC definition.

Also, yours has the Kendo Window expansion in the document, while mine does not appear to be instantiated:

[Anton Mironov]

Hi Brian,

Thank you for the image provided.

Yes, I can also see the differences. It is recommended to use the latest version as it provides the last updates, new features, bug fixes, etc.

Is it possible to send me a runnable sample of your application where the pointed issue is represented? We could open a private ticket in our system if needed.

Once I have the pointed behavior represented locally, will try my best to fix it for the case.

Looking forward to hearing back from you.

Best Regards,
Anton Mironov