I am trying to use the kendo ui window control as a modal when I press a button to display a kendo ui grid; however, when I put the control in form tags, the window doesn't display. Below is a simplified version of what I am trying to do.
We are using the latest version of Kendo UI and jQuery 2.1.14.
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
></
title
>
<
link
rel
=
"stylesheet"
href
=
"styles/kendo.common.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"styles/kendo.default.min.css"
/>
<
script
src
=
"scripts/jquery-2.1.4.min.js"
></
script
>
<
script
src
=
"Scripts/jszip.min.js"
></
script
>
<
script
src
=
"scripts/kendo.all.min.js"
></
script
>
<
script
>
$(document).ready(function () {
var window = $('#window');
if (!window.data('kendoWindow')) {
window.kendoWindow({
width: "200px",
title: "Column Picker",
modal: true,
//visible: false,
position: { top: 100, left: 400 },
}).data("kendoWindow").center();
}
});
function openWindow() {
var window = $('#window');
window.data('kendoWindow').open();
};
</
script
>
</
head
>
<
body
>
<
form
id
=
"myForm"
>
<
button
class
=
"k-button"
onclick
=
"openWindow()"
>Open Window</
button
>
<
div
id
=
"window"
style
=
"display:none;"
>
Test window
</
div
>
</
form
>
</
body
>
</
html
>