Kendo window and Kendo grid - Destroy Problem

[Robert Madrian]

Hello,

I use the following Code to create a Kendo window dynamical to load a partial view - after closing the window I call the destroy method
to remove the window and it Content from the DOM.

$("<div id='win" + name + "' />").kendoWindow({
                    title: stitle,
                    actions: ["Close"],
                    draggable: false,
                    resizable: false,
                    //appendTo: "#containerTest",
                    modal: true,
                    animation: {
                        open: {
                            effects: "slideIn:left",
                            duration: 500
                        },
                        close: {
                            effects: "slideIn:left",
                            reverse: true,
                            duration: 500
                        }
                    },
                    visible: false,
                    pinned: false,
                    content: { url: surl, iframe: iframe },
                    close: function (e) {
                    },
                    deactivate: function (e) {
                        this.destroy();
                    }
                });

                var window = $(windowname).data("kendoWindow");
                window.wrapper.addClass("gpdb-sidebar-window");
                window.open();

 

But there is a Performance Problem if I open the window in a view with a Kendo grid with more then 500 rows - it seems that to use the destroy() in the deactivate Event of the window becomes slower and slower the more rows in the grid exists...

I have attached a Picture from the Chrome performance analyser - it seems there is a "Recalculate Style" in Kendo.all.js which is called often...

robert

 

[Robert Madrian]

here is the pricture

[Robert Madrian]

picture

[Robert Madrian]

now with chrome - the pricture

[Ivan Danchev]

Hello Robert,

It appears the image did not attach properly, could you try zipping it and reattaching it? As for the performance hit when closing the Window if there is a Grid with multiple rows on the page I was not able to observe such behavior. Here's a dojo example showing a similar scenario. Note that I changed the reference to the Window from "window" to "win":

var win = $("#win").data("kendoWindow");

in order to avoid duplication with the browser's Window object. Could you demonstrate the issue in the linked example?

Regards,
Ivan Danchev
Progress Telerik

[Robert Madrian]

I will prepare a sample projectI will prepare a

[Ivan Danchev]

Hello Robert,

Take your time with preparing the example.

Regards,
Ivan Danchev
Progress Telerik

[Robert Madrian]

I have created a sample which demonstrates this - as you can see in this Video: https://www.screencast.com/t/g3SDbA7Mx9VF

if I open the window with a view with some controls and 800 rows in the grid and then close it you can see on the right side the shadow of the window which hides after a view seconds
if you change the grid page size to 20 and then do the same the window hides immediately...
it seem that the this.destroy(); in the deactivate event of the window do something which habe a great delay...

robert

[Ivan Danchev]

Hi Robert,

The time consumed by style recalculation is related to the numbers of elements rendered on the page not specifically to the Grid. That is if you have hundreds or thousands of elements (divs, spans, inputs, etc.) it will take more time.  We would suggest instead of calling the destroy method in the deactivate event handler to call it in the close event handler:

close: function (e) {
    this.destroy();
},

At my end this significantly improves the performance (screenshot).

Regards,
Ivan Danchev
Progress Telerik

[Robert Madrian]

OK, it seems to be faster but then I loose the Animation (slidein) effect :-(

robert

[Ivan Danchev]

Hi Robert,

In that case you can consider removing the window's element instead of calling its destroy method:

deactivate: function (e) {
   $(".gpdb-sidebar-window").remove();
}

Regards,
Ivan Danchev
Progress Telerik

[Robert Madrian]

with that solution some objects left behind like k-list-container k-pop ups etc.
the only workaround seems to reduce the rows in the grid with paging?
robert

[Ivan Danchev]

Hi Robert,

Apart from using paging in the Grid I am noticing an improvement if the modality of the Window is turned off when closing, so you could give this a try:

close: function (e) {
    this.setOptions({ modal: false })
},
deactivate: function (e) {
    this.destroy();
}

Regards,
Ivan Danchev
Progress Telerik