Kendo window and Kendo grid - Destroy Problem

13 posts, 1 answers
  1. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 13 Feb 2018 Link to this post

    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

     

  2. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 13 Feb 2018 in reply to Robert Madrian Link to this post

    here is the pricture
  3. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 13 Feb 2018 in reply to Robert Madrian Link to this post

    picture
  4. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 13 Feb 2018 Link to this post

    now with chrome - the pricture
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2063 posts

    Posted 15 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 15 Feb 2018 in reply to Ivan Danchev Link to this post

    I will prepare a sample projectI will prepare a
  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2063 posts

    Posted 16 Feb 2018 Link to this post

    Hello Robert,

    Take your time with preparing the example.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 16 Feb 2018 in reply to Ivan Danchev Link to this post

    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

  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2063 posts

    Posted 20 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 20 Feb 2018 in reply to Ivan Danchev Link to this post

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

    robert

  11. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2063 posts

    Posted 22 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  12. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 22 Feb 2018 in reply to Ivan Danchev Link to this post

    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

  13. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2063 posts

    Posted 23 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular 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