[Solved] Dynamically-created client-side Window won't close subsequently-opened windows

[Ando]

Hello all-

On an MVC View page, we use an HTML table to iterate through a list of objects from the Model and display relevant fields. One of the columns of this table also generates a button that makes a call to dynamically create and open a Telerik MVC Window, using JavaScript and the client-side API. The window displays properly, and if you click on the "x" that is created as part of the window, it will always close properly.

<table id="ListTable" class="Table">
            <tr class="HeaderRow">
                <td>ID</td>
                <td>Code</td>
                <td>Description</td>
                <td>Active</td>
                <td>Updated On</td>
                <td>Members</td>
                <td>Cascades</td>
            </tr>
            <tbody>
            <%foreach (var item in Model.Items)
              {%>
                 <tr>
                   <td><%:item.Id %></td>
                   <td><%:item.Code %></td>
                   <td><%:item.Description %></td>
                   <td><%:item.Active %></td>
                   <td><%:item.UpdatedOn %></td>
                   <td>[Not yet implemented]</td>
                   <td>
                        <%= Html.GenericExtensionButton(Buttons.Selection, "btnCascades", "Cascades", "Cascades", 60, "openCascadeWindow(" + item.Id + ");")%>
                   </td>
                </tr>
                 <%} %>
            </tbody>
        </table>

openCascadeWindow: function (Id) {
        var url = "/Site/Controller/CascadeViewer/" + Id;
        var windowElement = $.telerik.window.create({
            title: "Cascade Viewer",
            contentUrl: url,
            modal: true,
            resizable: false,
            draggable: false,
            scrollable: true,
            width: 860,
            height: 300
        });

        windowElement.attr('id', 'wCascadeViewer');
        var window = $(windowElement).data('tWindow');
        window.center().open();
    },

However, in keeping with UI standards for our website, we must also have a button on the Partial View rendered in the Window that will close the window. This button works properly and closes it the first time, but every subsequent Window you open cannot be closed using this button.

CloseCascadeWindow: function () {
        var window = $('#wCascadeViewer').data('tWindow');
        window.close();
    }

Debugging the Javascript, it appears that the reference retrieved by the jQuery statement always refers to the first Window opened. I attempted to get around this by adding into the create() method a function for onClose that calls the Window's destroy() method. However, when I do this, the Close button does close the window, but it leaves the gray modal background in place, so that the page can no longer be interacted with.

So, basically, I am asking for some way that I can always get a clean reference to the current window and close it using the close() method. Can you please help?

Thanks in advance,

Ando Poore

[Dimo]

Hello Ando,

First call close(), then destroy(). In this way the modal background will be removed as well. This issue is resolved in the coming Q3 2011 release.

Greetings,
Dimo
the Telerik team

[Ando]

Awesome, that worked great! Thanks for your help!