Kendo UI Window Widget: Window only opens once

On a project I’m using the Telerik Kendo UI widgets and I’m enjoying the experience so far. They are a lot better than the default jQuery UI controls(and better documented).

However with the Window widget I had a small issue I wanted to share(together with a solution).

The first time I used the Window widget I used the following JavaScript:

	$(function () {
	//Show the dialog on click action
	$('#showMessageDialogLink').on('click', function (e) {
	e.preventDefault();
	//Convert a div to a dialog
	$("#dialog").kendoWindow({
	modal: true,
	visible: false
	}).open();
	});
	});

view raw WindowWidgetWrong.js hosted with ❤ by GitHub

This code will open a Window when the user clicks on a specific link on my webpage. This code works as expected BUT only the first time that I load my page. If I close the window and click on the link again nothing happens…

After some trial and error I found a solution, it seems like you have to create the Window widget only once and then re-use it each time you want to open a new Window. Here is my updated code:

	$(function () {
	//Convert a div to a dialog
	$("#dialog").kendoWindow({
	modal: true,
	visible: false
	});
	//Show the dialog on click action
	$('#showMessageDialogLink').on('click', function (e) {
	e.preventDefault();
	$("#dialog").data("kendoWindow").open();
	});
	});

view raw WindowWidgetCorrect.js hosted with ❤ by GitHub

You can see that we only create a Window object once and then re-access it through the data property of the div.