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

[Marc]

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();
});

 

[Alex Gyoshev]

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

 

 

[Marc]

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