This is a migrated thread and some comments may be shown as answers.

Reuse of a Window

9 Answers 1791 Views

Window

This is a migrated thread and some comments may be shown as answers.

michael asked on 21 Dec 2011, 06:38 PM

I have a menu bar with an option that I want to open in a window. The contents of the window is dynamic and needs to be refreshed each time I open the window.

The first time I click on the option the window opens correctly, and when I click on the "close" icon, the window closes as expected.

The second time I click on the option, the window does not open. I suspect it has something to do with the state of the window.

Listed below is my code that I use to open the window:

<script type="text/javascript">
$(document).ready(function () {
$(".menu-dialog").click(function () {
var href = $(this).attr("href");
var title = $(this).attr("title");
var myWin = $("#anchor").kendoWindow({
width: "auto",
height: "auto",
modal: false,
resizable: true,
title: title,
content: href
});
return false;
});
});
</script>

<body>
<div class="main">
<div id="anchor"></div>
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear" />
<div class="footer" />

</body>

9 Answers, 1 is accepted

answered on 22 Dec 2011, 04:53 PM

Hello Michael,

In order to show the window a second time, you need to call its open() method. The kendoWindow() plug-in only creates the client-side object and required HTML.

$(".menu-dialog").click(function () {
  var href = $(this).attr("href");
  var title = $(this).attr("title");
  var myWin = $("#anchor").kendoWindow({
  width: "auto",
  height: "auto",
  modal: false,
  resizable: true,
  title: title,
  content: href
  });
myWin.data("kendoWindow").open();
  return false;
});

Kind regards,

Alex Gyoshev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 06 Jan 2012, 02:33 PM

Hello Michael,

After revisiting the thread, I think that the following code should work in your scenario:

$(".menu-dialog").click(function () {
var href = $(this).attr("href");
var title = $(this).attr("title");
var myWin = $("#anchor");

if (!myWin.data("kendoWindow")) {
// window not yet initialized
myWin.kendoWindow({
width: "auto",
height: "auto",
modal: false,
resizable: true,
title: title,
content: href
});
} else {
// reopening window
myWin.data("kendoWindow")
.content("Loading...") // add loading message
.refresh(href) // request the URL via AJAX
.open(); // open the window
}

return false;
});

Kind regards,
Alex Gyoshev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 13 Jan 2012, 03:24 PM

I found something very strange. Whan I try to reopen the window it reopens :) great. But the modality is actibg very strange. The first and the second time the window is modal, but the third and every next one it is not. Can you help me. Here is my code.

$('#btnOpen').click(function(){
    var window = $("#window").kendoWindow({
       draggable: true,
       resizable: true,
       width: 'auto',
       height: 'auto',
       title: "Modal Window",
       modal: true
   });
   window.data("kendoWindow").open();
   $('#window').css('display', '');
   return false;
});

Edit: When I close the window the screen flashes as if it was modal.

answered on 17 Jan 2012, 09:19 PM

The following code causes my app to hang when I click the close ("X") button...

var onClose = function () {
var myWin = new $("#Kwindow").data("kendoWindow");
myWin.destroy();
}

var myWin = new $("#Kwindow");
myWin.kendoWindow({
width: "auto",
height: "auto",
modal: false,
resizable: true,
title: title,
content: href,
close: onClose
});

answered on 07 Feb 2013, 04:15 PM

I've faced to the following issue:
- there is a chain of modal kendo ui windows(one opened by the other);
- when the last window closes it gets destoryed by calling method destroy.
but unexpectedly next windows becomes not modal - so to last windows in the chain are 'enabled' and usable.

I've analyzed in sources method destroy for window and found folowing code:

if (shouldHideOverlay) {
    that._overlay(false).remove();
} else if (modalWindows.length > 0) {
    windowObject(modalWindows.eq(modalWindows.length - 2), that.options.name)._overlay(true);                 
}
Why did developers use modalWindows.length - 2 instead of modalWindows.length - 1

Changed that code to 
if (shouldHideOverlay) {
 that._overlay(false).remove();
} else if (modalWindows.length > 0) {
 windowObject(modalWindows.eq(modalWindows.length - 1), that.options.name)._overlay(true); 
}
fixed the issue, at least visually.
What do you think about this?

answered on 13 Feb 2014, 08:51 PM

I created a property on our view model to handle the creation of a modal window and the destruction of it when closed. Pass in a Title for the window and a Kendo HTML Template.

DisplayDialogTemplate: function (title, template) {

if (!kendoWindow) {

var kendoWindow = $("<div />").kendoWindow({

title: title,

resizable: false,

modal: true,

content: {

template: template

},

close: function () { kendoWindow.data("kendoWindow").destroy() } // $("input[id=wc-copyToClipboardDialogSelectedText]").length

});

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

}