Kendo UI - Why can't I open and close the window?
I have tried different methods to get my window open but still fails.
My first attempt was to open a window when a button was clicked with 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 content for a window from remote html, the function only allows the content to be loaded once, if it has already been loaded then it does not load it again, I tested before trying to implement Kendo UI widget window to make sure it works correctly.
hideHomeScreen is a function that hides any element from the div that opens the window.
showUsuarios is a function that displays the contents of the window.
It was supposed to check if the data was created for the kendoWindow to open the window, otherwise it must create it. The first time I click the button, it works, but when I close the window and click the button again, the window is not displayed at all (I am talking about the window widget UI, not the content of the usuariosDiv, I checked Firebug and the content for the usuariosDiv is still exist, but the window widget UI is not displayed).
The second attempt I made 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 cannot open the window when the button is pressed again.
My third attempt was based on the "Initialize Window", "Center" and "Customize Mouse Button Action" example on 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 does not display the window properly, instead of showing the window at the specified dimensions, it only displays a small text box.
Regarding the first part, my problem with closing the window occurs when I try to do so with an event raised by a control on the window. I am not talking about the close button in the top right corner, I mean any button that I have displayed in the window.
For example, I tried 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'm not just relying on the default close button on a window, it's because there are procedures that should close the window when done.
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.common.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.com/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.net/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 understand what I am doing wrong?
source to share
I realize this is long after the original post, but the 70% scaling factor is set in the window close options.
The error seems to affect the opening and closing of the same window, as the window gets scaled to 70% when closed, but never scaled to 100% when opened.
I worked around this by adding the following to stop it scaling to 70% on close.
var emptyWindow = $(theWindowId).data("kendoWindow");
emptyWindow.options.animation.close.effects.zoom.properties.scale = 1;
source to share
This should work to close the window:
$("#btnBack").click( function (e) {
$("#usuariosDiv").data("kendoWindow").close();
});
Also you can look at the animation settings: false; on the window that opens.
I remember that I had some similar problems with this.
As for your first try, you can try this (added .data ("kendowindow") to 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();
});
source to share