DatePicker Popup and iframe

3 posts, 0 answers
  1. Paul
    Paul avatar
    20 posts
    Member since:
    Apr 2015

    Posted 14 Dec 2016 Link to this post

    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. Paul
    Paul avatar
    20 posts
    Member since:
    Apr 2015

    Posted 15 Dec 2016 in reply to Paul Link to this post

    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?

  3. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3717 posts

    Posted 16 Dec 2016 Link to this post

    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.
Back to Top