Widgets inside window are only loaded properly when window is opened for the first time

3 posts, 1 answers
  1. Marc
    Marc avatar
    4 posts
    Member since:
    May 2012

    Posted 22 Jun 2016 Link to this post

    Hello,

    I am new to Kendo UI and I am having some trouble trying to create a window dialog with datepickers in it.

    The first time I load it, it looks great.

    Then I close it, open it again and the datepickers don't seem to load properly.

    Can you help me or point me in the right direction?

    Here's my code:

    $("#button").click(function (e)
    {
        e.preventDefault();
        var kendoWindow = $("<div />").kendoWindow(
        {
            open: function ()
            {
                var picker = $("#project_end_datepicker").data("kendoDatePicker");
                if (picker == null)
                {
                    $("#project_end_datepicker").kendoDatePicker(
                    {
                        animation: false
                    });
     
                    $("#project_start_datepicker").kendoDatePicker(
                    {
                        animation: false
                    });
                }
            },
            title: "Nieuw project",
            resizable: false,
            iframe: true,
            modal: true
        });
                      
        kendoWindow.data("kendoWindow")
        .content($("#new-project-dialog").html())
        .center().open();
    });

     

  2. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2509 posts

    Posted 24 Jun 2016 Link to this post

    Hello Marc,

    The issue is that a new window is created on every button click, but not destroyed upon closing. The date picker elements have IDs, which should be unique on the page, so when a second window is created, the previous date pickers stay on the page.

    To solve this, use the following code:


        var kendoWindow = $("<div />").kendoWindow(
        {
            open: function () {
                $("#project_end_datepicker").kendoDatePicker({ animation: false }); 
                $("#project_start_datepicker").kendoDatePicker({ animation: false });
            },

            // delete previous instances

            deactivate: function() { this.destroy(); }

            title: "Nieuw project",

            resizable: false,
            iframe: true,
            modal: true
        });
        // ...

    Note that there is no need to check for if the date picker instances are created, since every window element will be a new one.

    An alternative approach is to reuse the window, by calling its open method if it is already initialized:
        var kendoWindow = $("#project-info").data("kendoWindow");
        if (kendoWindow) {
           // reuse
           kendoWindow.open();
        } else {
           // initialize
           var kendoWindow = $("<div id='project-info' />").kendoWindow({ ... })
        }

    Regards,
    Alex Gyoshev
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Marc
    Marc avatar
    4 posts
    Member since:
    May 2012

    Posted 24 Jun 2016 in reply to Alex Gyoshev Link to this post

    Thank you. I changed my code and it worked like a charm!
Back to Top