This is a migrated thread and some comments may be shown as answers.

DatePicker Popup and iframe

2 Answers 669 Views

Date/Time Pickers

This is a migrated thread and some comments may be shown as answers.

Paul asked on 14 Dec 2016, 04:18 PM

date_picker_before.png

date-picker-after.png

We currently have a DatePicker being displayed in a Kendo Window. The DatePicker is located in an aspx which is displayed in an iframe within the Kendo Window.

When the DatePicker calendar icon button is clicked, the calendar drops down (as show in the attached image) but as the calendar popup is too big for the iframe, you see the scroll bar appear for the overflow. Yes, we could change the size of the frame, but I was hoping for a more complicated solution to tackle these scenarios.

Is it possible to nicely control the popup in this scenario?

Maybe have it rendered in the parent?

Thanks

Paul

2 Answers, 1 is accepted

answered on 15 Dec 2016, 12:02 PM

Here is a sample:

Host Page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultHost.aspx.cs" Inherits="DatePicker_DefaultHost" %>

<%@ Import Namespace="System.Web.Optimization" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb">

<head runat="server">

<title></title>

<%= Scripts.Render("~/bundles/jquery") %>

<%= Scripts.Render("~/bundles/kendo") %>

<%= Styles.Render("~/bundles/kendo/css") %>

<%--<%= Styles.Render("~/bundles/site/css") %>--%>

</head>

<body>

<form id="form1" runat="server">

<div>

<button type="button" onclick="showPopup(); return false;">Click Me!</button>

</div>

<script type="text/javascript">

function showPopup() {

var width = 400;

var height = 170;

var title = 'test';

var url = 'DatePopup.aspx';

var $frame = $('<iframe class="k-content-frame"></iframe>');

$frame.attr('src', url);

var window = $frame.kendoWindow({

modal: true,

iframe: false,

draggable: true,

scrollable: true,

pinned: false,

title: title,

resizable: true,

content: null,

width: width,

height: height,

minWidth: width,

minHeight: height,

visible: false,

actions: ["Close"],

deactivate: function () {

this.destroy();

}

}).data('kendoWindow');

window.center().open();

}

</script>

</form>

</body>

</html>

Popup Page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DatePopup.aspx.cs" Inherits="DatePopup_Default" %>

<%@ Import Namespace="System.Web.Optimization" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb">

<head runat="server">

<title></title>

<%= Scripts.Render("~/bundles/jquery") %>

<%= Scripts.Render("~/bundles/kendo") %>

<%= Styles.Render("~/bundles/kendo/css") %>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:TextBox runat="server" ID="DateInput" data-p-type="kendo-date" EnableViewState="false"></asp:TextBox>

</div>

</form>

<script type="text/javascript">

$(function () {

var $textBoxForDatePicker = $("#DateInput");

$textBoxForDatePicker.kendoDatePicker({

popup: {

//appendTo: $(window.parent.document.body),

//position: "center center"

collision: "fit flip"

},

close: function (e) {

//e.preventDefault();

}

});

var widgetDp = $textBoxForDatePicker.data("kendoDatePicker");

widgetDp.bind("open", function (e) {

// k-animation-container

//var popup = e.sender.wrapper;

var datePicker = $textBoxForDatePicker.data("kendoDatePicker");

var popup = datePicker.dateView.popup;

var $appendTo = $(window.parent.document.body);

var dateView = $appendTo.children('#DateInput_dateview')[0];

popup.bind("activate", function (e) {

// DateInput_dateview

debugger;

var $dateView = $(dateView);

// this is the element you are looking for

$dateView.parent().css({

position: "absolute",

top: "50%",

left: "50%",

"z-index": "99999",

transform: "translate('-50%','-50%')",

});

})

});

</script>

</body>

</html>

Any ideas on what we could do?

answered on 16 Dec 2016, 09:25 AM

Hello Paul,

In general, there is no elegant solution when working with iframes. Basically, the widget will need to go beyond its current document and move to the upper parent, which is kind of strange and definitely not a standard behavior.

I am afraid that there is no easy way to tackle such issues without modifying the source of the widget. We do not have any plans to support such scenarios for the time being.

What I would suggest you is to post your suggestion in our UserVoice portal. Based on the users' interest, we will decide whether to schedule it for further investigation.

Regards,
Georgi Krustev
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.