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 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
    2500 posts

    Posted 24 Jun 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. Kendo UI is VS 2017 Ready
  4. Marc
    Marc avatar
    4 posts
    Member since:
    May 2012

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

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