I've tried different methods to open my window, but so far everything fails.
My first try was to open the window when a button was clicked with a code like this based on this example:
$('#btnUsuarios').click(function (e) {
onUsuariosLoad();
var window = $('#usuariosDiv');
if (!window.data('kendoWindow')) {
window.kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Modal Window",
width: "65%",
close: hideUsuarios
});
} else {
window.data('kendoWindow').open();
}
hideHomeScreen();
showUsuarios();
});
onUsuariosLoad is a function that loads the content for the window from a remote html, the function makes sure to only load once the content, if it had been loaded already then it doesn't load it again, I've tested the function before trying to implement the window Kendo UI widget to make sure it works properly.
hideHomeScreen is a function that hides some element from the div that open the window.
showUsuarios is a function that shows the content for the window.
It was supposed to check if the data for a kendoWindow had been created then to open the window, else it should create it. The first time I click the button it works, but when I close the window and click again the button, the window isn't show at all (I'm talking about the window widget UI, not the contents of the usuariosDiv, I checked Firebug and the contents for usuariosDiv are still there, but the window widget UI isn't shown).
The second try I did was like this:
$('#btnUsuarios').click(function (e) {
onUsuariosLoad();
$('#usuariosDiv').kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Modal Window",
width: "65%",
close : hideUsuarios
});
hideHomeScreen();
showUsuarios();
});
This is similar to the first attemp but it happens the same thing: it works fine the first time, but when I close the window it fails to reopen the window when I click again the button.
My third try was based on the example Initialize Window, center, and configure button click action from this page:
var win = $("#usuariosDiv").kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
visible: false,
title: "Modal Window",
width: "65%",
close: hideUsuarios
}).data("kendoWindow");
$('#btnUsuarios').click(function (e) {
onUsuariosLoad();
var win = $("#usuariosDiv").data("kendoWindow");
win.open();
hideHomeScreen();
showUsuarios();
});
This doesn't show the window properly, instead of showing a window with the specified dimensions, it only shows a tiny dot modal window.
That's for the opening part, my problem with closing the window es when I try to do it by an event triggered by a control on the window. I'm not talking about the close button on the upper right corner, I'm refering to any button I have displayed on the window.
For example, I tried this to close the window:
$('#btnBack').click(function (e) {
hideUsuarios();
var window = $('#usuariosDiv');
window.data('kendoWindow').close();
});
But I get the following error: Uncaught TypeError: Cannot call method 'close' of undefined. If you're asking why I don't simply rely on the default close button on the window, it's because there're procedures, that when finished, need to close the window.
This is my View:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendomon.min.css")%>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.metro.min.css")%>" rel="stylesheet" type="text/css" />
<script src=".7.min.js" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script>
<script src="<%: Url.Content("~/Scripts/jquery.signalR-1.0.0-rc1.min.js")%>" type="text/javascript"></script>
<script src=".ashx?v=6.3" type ="text/javascript" ></script>
<script src="<%: Url.Content("~/Scripts/index/templates.js")%>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/index/main.js")%>" type="text/javascript"></script>
<style type="text/css">
#verticalMenu {
top: 39px;
left: 0px;
}
</style>
</head>
<body onload="onPageLoad()">
<div id="canvasDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: transparent;">
<div id="alertDiv" style="position: absolute; top: -250px; background-color: #F00; z-index: 50; opacity:1; border-top: 1px solid #FFF; border-right: 1px solid #F5F5F5; border-bottom: 1px solid #D5D5D5; border-left: 1px solid #F5F5F5">
<div id="msgDiv" style="position:absolute;left:10px; right:10px; bottom: 10px; text-align: center;width: 50%; margin: 0px auto;">Alerta Sismo Detectado</div>
<div id="btnCloseAlert" style="position: absolute; top: 0px; right: 0"><span class="k-icon k-i-close"></span></div>
</div>
<div id="homeScreenDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: white; z-index: 10; opacity:1">
</div>
<div id="usuariosDiv" style="position: absolute; left: 0; width: 100%; height: 100%; background-color: white; z-index: 2; opacity:0">
</div>
<div id="sismosDiv" style="position: absolute; left: 0; width: 100%; height: 100%; background-color: white; z-index: 2; opacity:0">
<div id="leftBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 190px; height: 100%; background-color: white; z-index:20">
<div onclick="hideSismos()" style="position:absolute;height: 39px; width: 25%; left:0; top:0"><div style="position:absolute; top: 10px; bottom:10px;left:10px;right:10px"><span class="k-icon k-i-arrow-w"></span></div></div>
<div style="position:absolute;height: 39px; width: 75%; right:0; top:10px; bottom:10px; text-align:center">Sismos</div>
<ul id="verticalMenu" style="position: absolute; width: 99%; height: auto; display: block;" >
<li id="Regiones" style="height: 75px; text-align: center;">Regiones</li>
<li id="Clusters" style="height: 75px; text-align: center;">Clusters</li>
<li id="Dispositivos" style="height: 75px; top: auto; text-align: center;">Dispositivos</li>
<li id="Eventos" style="height: 75px; text-align: center;">Eventos</li>
</ul>
</div>
<div id="selectionBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:9">
<div class="k-toolbar k-grid-toolbar" style="height: 34px;">
<button id="btnAgregarEntry" class="k-button k-button-icontext k-add-button" onclick="swapToNewData(this)"><span class="k-icon k-add"></span>Agregar</button>
</div>
<div id="listView" style="background-color: transparent; position: absolute; top: 40px; left: 0px; right: 0px; width:auto; height:auto" ></div>
</div>
<div id="dataBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 330px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:8">
<div id="dataView" style="background-color: transparent; position: absolute; top: 40px; bottom:0px; left: 0px; right: 0px; width:auto; height:auto" ></div>
</div>
<div id='myMap' style="border: thin solid black; background-color: white; position: absolute; display: block; min-height: 100%; top: 0px; left: 189px; width: 88%; z-index: 20"></div>
</div>
</div>
</body>
</html>
Can anyone help me to understand what am I doing wrong?
I've tried different methods to open my window, but so far everything fails.
My first try was to open the window when a button was clicked with a code like this based on this example:
$('#btnUsuarios').click(function (e) {
onUsuariosLoad();
var window = $('#usuariosDiv');
if (!window.data('kendoWindow')) {
window.kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Modal Window",
width: "65%",
close: hideUsuarios
});
} else {
window.data('kendoWindow').open();
}
hideHomeScreen();
showUsuarios();
});
onUsuariosLoad is a function that loads the content for the window from a remote html, the function makes sure to only load once the content, if it had been loaded already then it doesn't load it again, I've tested the function before trying to implement the window Kendo UI widget to make sure it works properly.
hideHomeScreen is a function that hides some element from the div that open the window.
showUsuarios is a function that shows the content for the window.
It was supposed to check if the data for a kendoWindow had been created then to open the window, else it should create it. The first time I click the button it works, but when I close the window and click again the button, the window isn't show at all (I'm talking about the window widget UI, not the contents of the usuariosDiv, I checked Firebug and the contents for usuariosDiv are still there, but the window widget UI isn't shown).
The second try I did was like this:
$('#btnUsuarios').click(function (e) {
onUsuariosLoad();
$('#usuariosDiv').kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Modal Window",
width: "65%",
close : hideUsuarios
});
hideHomeScreen();
showUsuarios();
});
This is similar to the first attemp but it happens the same thing: it works fine the first time, but when I close the window it fails to reopen the window when I click again the button.
My third try was based on the example Initialize Window, center, and configure button click action from this page:
var win = $("#usuariosDiv").kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
visible: false,
title: "Modal Window",
width: "65%",
close: hideUsuarios
}).data("kendoWindow");
$('#btnUsuarios').click(function (e) {
onUsuariosLoad();
var win = $("#usuariosDiv").data("kendoWindow");
win.open();
hideHomeScreen();
showUsuarios();
});
This doesn't show the window properly, instead of showing a window with the specified dimensions, it only shows a tiny dot modal window.
That's for the opening part, my problem with closing the window es when I try to do it by an event triggered by a control on the window. I'm not talking about the close button on the upper right corner, I'm refering to any button I have displayed on the window.
For example, I tried this to close the window:
$('#btnBack').click(function (e) {
hideUsuarios();
var window = $('#usuariosDiv');
window.data('kendoWindow').close();
});
But I get the following error: Uncaught TypeError: Cannot call method 'close' of undefined. If you're asking why I don't simply rely on the default close button on the window, it's because there're procedures, that when finished, need to close the window.
This is my View:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.mon.min.css")%>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.metro.min.css")%>" rel="stylesheet" type="text/css" />
<script src="http://code.jquery./jquery-1.7.min.js" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script>
<script src="<%: Url.Content("~/Scripts/jquery.signalR-1.0.0-rc1.min.js")%>" type="text/javascript"></script>
<script src="http://ecn.dev.virtualearth/mapcontrol/mapcontrol.ashx?v=6.3" type ="text/javascript" ></script>
<script src="<%: Url.Content("~/Scripts/index/templates.js")%>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/index/main.js")%>" type="text/javascript"></script>
<style type="text/css">
#verticalMenu {
top: 39px;
left: 0px;
}
</style>
</head>
<body onload="onPageLoad()">
<div id="canvasDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: transparent;">
<div id="alertDiv" style="position: absolute; top: -250px; background-color: #F00; z-index: 50; opacity:1; border-top: 1px solid #FFF; border-right: 1px solid #F5F5F5; border-bottom: 1px solid #D5D5D5; border-left: 1px solid #F5F5F5">
<div id="msgDiv" style="position:absolute;left:10px; right:10px; bottom: 10px; text-align: center;width: 50%; margin: 0px auto;">Alerta Sismo Detectado</div>
<div id="btnCloseAlert" style="position: absolute; top: 0px; right: 0"><span class="k-icon k-i-close"></span></div>
</div>
<div id="homeScreenDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: white; z-index: 10; opacity:1">
</div>
<div id="usuariosDiv" style="position: absolute; left: 0; width: 100%; height: 100%; background-color: white; z-index: 2; opacity:0">
</div>
<div id="sismosDiv" style="position: absolute; left: 0; width: 100%; height: 100%; background-color: white; z-index: 2; opacity:0">
<div id="leftBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 190px; height: 100%; background-color: white; z-index:20">
<div onclick="hideSismos()" style="position:absolute;height: 39px; width: 25%; left:0; top:0"><div style="position:absolute; top: 10px; bottom:10px;left:10px;right:10px"><span class="k-icon k-i-arrow-w"></span></div></div>
<div style="position:absolute;height: 39px; width: 75%; right:0; top:10px; bottom:10px; text-align:center">Sismos</div>
<ul id="verticalMenu" style="position: absolute; width: 99%; height: auto; display: block;" >
<li id="Regiones" style="height: 75px; text-align: center;">Regiones</li>
<li id="Clusters" style="height: 75px; text-align: center;">Clusters</li>
<li id="Dispositivos" style="height: 75px; top: auto; text-align: center;">Dispositivos</li>
<li id="Eventos" style="height: 75px; text-align: center;">Eventos</li>
</ul>
</div>
<div id="selectionBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:9">
<div class="k-toolbar k-grid-toolbar" style="height: 34px;">
<button id="btnAgregarEntry" class="k-button k-button-icontext k-add-button" onclick="swapToNewData(this)"><span class="k-icon k-add"></span>Agregar</button>
</div>
<div id="listView" style="background-color: transparent; position: absolute; top: 40px; left: 0px; right: 0px; width:auto; height:auto" ></div>
</div>
<div id="dataBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 330px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:8">
<div id="dataView" style="background-color: transparent; position: absolute; top: 40px; bottom:0px; left: 0px; right: 0px; width:auto; height:auto" ></div>
</div>
<div id='myMap' style="border: thin solid black; background-color: white; position: absolute; display: block; min-height: 100%; top: 0px; left: 189px; width: 88%; z-index: 20"></div>
</div>
</div>
</body>
</html>
Can anyone help me to understand what am I doing wrong?
Share Improve this question edited Feb 15, 2013 at 21:52 Uriel Arvizu asked Feb 15, 2013 at 19:02 Uriel ArvizuUriel Arvizu 1,9166 gold badges41 silver badges98 bronze badges 3-
Never name a variable
window. – jbabey Commented Feb 15, 2013 at 19:06 -
Several question: @jbabey is right,
windowis used by the browser; did you keep in mind that things happen in parallel? I mean, you start loading but it takes a while and you don't know when. So if you invokeonUsuariosLoadand immediately open the window, whatever you have started loaded is (likely) not available. – OnaBai Commented Feb 15, 2013 at 20:59 - My mistake for using the name window, got confused by the kendo demo. The function onUsuariosLoad loads only once the content, if the content has been loaded already, then it is not loaded again, I made sure of it before trying to implement the Kendo UI windows. As I mentioned in my question, it works the first time I open the window, the contents are loaded and then shown, but the moment I close the window and try to open it again by click on the button nothing is shown, by that I mean, the window isn't shown at all. – Uriel Arvizu Commented Feb 15, 2013 at 21:47
5 Answers
Reset to default 3I had a similar problem and instead of close() I suggest using destroy() and creating new window every time.
I would prefer to bind the destroy-method to the deactivate-event and use the close()-method on the window. This way, the closing-animation will be properly finished.
...
deactivate: function() {
this.destroy();
}
...
I realise this is long after the original post but the 70% scale factor is set in the window close options.
The bug seems to affect opening and closing the same window, as the window gets scaled to 70% on close but never put to 100% on open.
I worked around this by adding the following to stop it scaling it to 70% on close.
var emptyWindow = $(theWindowId).data("kendoWindow");
emptyWindow.options.animation.close.effects.zoom.properties.scale = 1;
Insted
win.open();
you use below code.
$("#usuariosDiv").data("kendoWindow").open();
This should work to close a window:
$("#btnBack").click( function (e) {
$("#usuariosDiv").data("kendoWindow").close();
});
Also you may want to look into setting animation:false; on the window open.
I remember I had some similar problems that were associated to that.
As far as your first attempt you may want to try this (added .data("kendowindow") into the first creation)
$("#btnUsuarios").click(function (e) {
onUsuariosLoad();
var window = $("#usuariosDiv");
if (!window.data("kendoWindow")) {
window.kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Modal Window",
width: "65%",
close: hideUsuarios
}).data("kendoWindow");
} else {
window.data("kendoWindow").open();
}
hideHomeScreen();
showUsuarios();
});