Kendo Angular 1 Date Picker & Modal Destroy

[Jason]

We have implemented a bunch of Angular 1 Kendo controls into our application. We have been encountering some slowness on the front end with the browser freezing when transitioning view states. I did some investigating, and was able to identify the issue as being related to the destroy methods kendo has implemented. 

I put in some performance testing code around the destroys, and for EACH calendar control on the page, the  .destroy() method is taking ~100ms, and for kendo windows, it is taking ~120-160ms per instance. If I comment the destroy method calls out, the page runs smoothly (but obviously we open ourselves up to memory leaks, so probably not a viable option). 

We have plenty of our own directives on the page, and destroying all our controls collectively takes under 5ms. Why is each instance of these kendo controls taking 20+ more time than the rest of our controls combined? Is this a known issue?

 

We aren't doing anything overly fancy with our implementation, below is how our date picker is implemented. 

   <input kendo-date-picker
           k-options="::datepickeroptions"
           ng-model="value"
           ng-show="!readmode"/>

 

We are using ~6 month old version of the library, however updating it to the latest made no improvement. 

 

Any help would be appreciated!

 

Thanks. 

[Stefan]

Hello Jason,

This is not a known issue, and it was not reproduced in our testing scenarios.

I made an example with 72 DatePickers and they were destroyed fast as expected:

http://dojo.telerik.com/ugipE

http://docs.telerik.com/kendo-ui/intro/widget-basics/destroy#destroy-widgets

I can assume that there is a custom code which is affecting the destroying performance.

If additional assistance is needed, please sent a runnable example reproducing the issue so I can investigate further.

Regards,
Stefan
Telerik by Progress

[Jason]

The issue I am seeing is directly in the kendo library itself. The method in question is kendo.destroy under initWidget.

    kendo.destroy = function (element) {

            $(element).find('[data-' + kendo.ns + 'role]').addBack().each(function () {
                var data = $(this).data();
                for (var key in data) {
                    if (key.indexOf('kendo') === 0 && typeof data[key].destroy === FUNCTION) {                        
                        data[key].destroy();
                    }
                }
            });
        };

The line: data[key].destroy();  is what seems to be taking a lot of time per control.It seems that this destroy is occurring automatically (which makes sense as per the documentation stating: "Kendo UI widgets are destroyed automatically when the web page is unloaded.")

Attached is an image of the javascript CPU profile from the Chrome debugger. 



You are correct, that it seems manually invoking the destroy seems to be much faster, therefore I attempted to add the $scope.$on('$destroy', function(){}) hook within our directives so that we can destroy the elements manually, but unfortunately the slower, automatic Kendo destroy is invoked before the hook in our directive, so we can't preemptively destroy them this way. Is there a means in which we could implement the destroy via the $scope.$on('$destroy') hook before the automatic destroy so that the directives can manage destroying the contained kendo controls themselves? Do we have to destroy them at the controller level?

 

Thanks!

[Stefan]

Hello Jason,

Our automatic destroy is executed first because it is also listening on the $scope.$on('$destroy') hook. I can assume that the different time occurs because the automatic approach is attaching every widget to the $scope.$on('$destroy') hook:

https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.angular.js#L551

I can suggest checking If there is another hook or apply the manual destroy approach.

Currently, we do not plan to change the automatic destroy implementation.

Apologies for the inconvenience this may cause you.

Regards,
Stefan
Telerik by Progress

[Jason]

I think we can come up with a solution to get around this (something such as broadcasting our own destroy event from the controllers on $scope.$on("$destroy") hook, as the controller destroy hook runs first). 

 

Thanks for your assistance Stefan!