Hi! I'm using IFrame windows for modal forms and want to be able to resize the modal window dynamically, based on the size of the calling parent.
Here is the calling parent:
@page
@addTagHelper "*, Kendo.Mvc"
@model MySite.Test.CustomerModel
@{
Layout = null;
}
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width"
/>
<
title
>Customer</
title
>
<
link
href
=
"https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap-v4.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.aspnetmvc.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.timezones.min.js"
></
script
>
</
head
>
<
body
>
@{
string[] actions = new string[] { "Close" };
}
<
kendo-window
name
=
"addEditCustomer"
modal
=
"true"
title
=
"Add a New Customer"
draggable
=
"true"
iframe
=
"true"
resizable
=
"true"
on-close
=
"onClose"
style
=
"display:none"
actions
=
"actions"
>
<
content
>
loading user info...
</
content
>
<
popup-animation
enabled
=
"true"
/>
</
kendo-window
>
<
a
href
=
"javascript:void(0);"
onclick
=
"openWindow(5)"
class
=
"btn btn-sm btn-outline-primary right"
>Click here to open the window.</
a
>
<
div
class
=
"responsive-message"
></
div
>
<
script
>
function onClose() {
//alert("closed");
}
function openWindow(id) {
var url = "/test/testaddcustomer?id=" + id;
$("#addEditCustomer").data("kendoWindow").refresh({ url: url }).title("Edit Customer");
$("#addEditCustomer").data("kendoWindow").open();
$("#addEditCustomer").data("kendoWindow").center();
}
</
script
>
</
body
>
</
html
>
And here is the window page:
@page
@model MySite.Test.AddCustomerModel
@{
Layout = null;
}
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width"
/>
<
title
>@ViewBag.Title</
title
>
<
link
rel
=
"stylesheet"
href
=
"~/css/bootstrap.css"
asp-append-version
=
"true"
/>
<
link
rel
=
"stylesheet"
href
=
"~/css/site.css"
asp-append-version
=
"true"
/>
<
link
href
=
"~/lib/open-iconic/font/css/open-iconic-bootstrap.css"
rel
=
"stylesheet"
/>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<
script
src
=
"~/js/site.js"
asp-append-version
=
"true"
></
script
>
<
script
src
=
"~/js/bundle.js"
></
script
>
<
script
src
=
"~/lib/bootstrap/dist/js/bootstrap.min.js"
></
script
>
</
head
>
<
body
>
<
div
>
<
br
/>
<
h2
>TestAddCustomer</
h2
>
<
p
> This would be a form to add the customer.</
p
>
</
div
>
</
body
>
</
html
>
<
script
>
$(document).ready(function () {
//var showWidth = $(window).parent.width()*.8;
//var showHeight = $(window).parent.height() * .8;
var showWidth = 400;
var showHeight = 400;
window.parent.$("#addEditCustomer").data("kendoWindow").setOptions({ width: showWidth, height: showHeight });
window.parent.$("#addEditCustomer").data("kendoWindow").center();
});
</
script
>
I am able to get the width and height to set to static values (400x400) and recenter, but I'd like to get the height dynamically, as in the commented lines.
Any help would be much appreciated!