panelbar remove panel problems

[leblancmeneses]

I am wanting to remove panels on client side - versus server side when page is loaded. I'm on: Kendo UI Complete v2013.1.514 - also tried Kendo UI Complete v2013.2.918 (same problem)

Problem 1:
when i made the change it affected my timeout wait cycle from 5ms to 4000ms;
anything less than ~4000ms - the internal controls hosted in the panel don't load correctly.

Problem 2:
if any item is removed with panelBar.remove(xxxx); the rest of the panels hosting input controls stop responding/ data is loaded but drop downs are not clickable, grids are NOT filterable, sortable, item selectable,

it seems as though mouse clicks never reach the ui anymore... but bootstrap buttons are clickable.

here is my directive extension for kendo panelbar

    $timeout(function () {
                var panelBar = element.data("kendoPanelBar");
                var el = $(element);

                $scope.$watch(function() {
                    return $scope[attr.selectedactivitymode];
                }, function (newValue, oldValue) {
                    if (newValue == null) return;

                    // hide panels based on activity mode - zero indexed
                    var template = panelBar.element.children("li").eq(0);
                    var caseInfo = panelBar.element.children("li").eq(1);
                    var partyInfo = panelBar.element.children("li").eq(2);
                    var filing = panelBar.element.children("li").eq(3);
                    var serviceContract = panelBar.element.children("li").eq(4);
                    var eServiceDetails = panelBar.element.children("li").eq(5);
                    var fees = panelBar.element.children("li").eq(6);

                    if (newValue != FileAndServeModule.CaseActivityMode.ModifyTemplate) {
                        panelBar.remove(template);
                    }
                    if (newValue != FileAndServeModule.CaseActivityMode.ViewFilingDetails) {
                        panelBar.remove(eServiceDetails);
                    }


                    if (newValue == FileAndServeModule.CaseActivityMode.ModifyTemplate) {
                        panelBar.expand(template);
                        panelBar.expand(caseInfo);
                        panelBar.expand(partyInfo);
                        panelBar.expand(filing);
                        panelBar.expand(serviceContract);
                        panelBar.expand(fees);

                        panelBar.select(template);
                    }
                    else if (newValue == FileAndServeModule.CaseActivityMode.ViewFilingDetails) {
                        panelBar.expand(filing);
                        panelBar.expand(eServiceDetails);

                        panelBar.select(filing);
                    }
                    else {
                        panelBar.expand(caseInfo);
                        panelBar.expand(partyInfo);
                        panelBar.expand(filing);
                        panelBar.expand(serviceContract);
                        panelBar.expand(fees);

                        panelBar.select(caseInfo);
                    }

                });


            }, 5000);

[burkeholland]

Please provide a Plunk showing the (non)working code

[leblancmeneses]

http://embed.plnkr.co/hMfBWec585vEWHF1QbYn/preview

commenting line 27 makes the drop down work. - see above "Problem #2"; feel free to add telerik points to my account : )

[burkeholland]

Indeed. I can replicate.

[mishoo]

I thought that might be a Kendo issue, but it doesn't manifest with Kendo alone: http://jsbin.com/oGePiqeV/1/edit

After much fiddling I found a workaround but I'm not sure it's correct. http://plnkr.co/edit/lGHJsDRxIKKAZlhv4IrX?p=preview (it's slightly modified — I dropped the custom directive and added a "Remove" button).

The issue disappeared when I commented line 373 in angular-kendo.js (which is there updated to the latest code). This means that somehow, removing the panel triggers a "destroy" event on $scope. I've no idea why would that happen, nor if the fix is correct.

@burkeholland, @passelin — any ideas here? The Angular is not strong in me. ;-)

[passelin]

What we seem to have here is that kendoui is removing a dom node and then angular destroys the scope it was associated to. The problem is that the panelbar directive is not creating a different scope for each of the panels it has the potential of removing from the dom and therefore it is the scope of the directive that gets destroyed.

I've made the problem more apparent by printing the scope $id: http://plnkr.co/edit/WP7SJA66Aqg9e8aNYteG?p=preview

Removing widget.destroy is not an option since this ensures that we don't leak dom nodes when the scope containing the directive is destroyed (when changing views using ng-view for example). What would need to be done is to create a scope for each panel in a separate kPanelBar directive.

This has the potential of happening for other widgets that play with the dom like that. We did this for the grid pagination for example because each row gets removed from the dom by kendo and new ones are created so we create and destroy scopes on dataBinding and dataBound in this case. It would be nice if kendo had generic events to indicate dom manipulation to be able to do this a single time.

[mishoo]

What we seem to have here is that kendoui is removing a dom node and then angular destroys the scope it was associated to.

I don't understand why this would happen. We clearly can have multiple elements sharing the same scope. I'm pretty sure there's a bug somewhere, Angular can't destroy a scope just because an element is removed. (found this with proof).

I don't like the idea to create a nested scope for each panelbar; it comes with its own set of problems.

[passelin]

If you don't do that and let a widget remove elements, you will end up with having data in your scope for things that are not there anymore (scope leak). This is one of the reasons why things like ng-repeat create a scope for each iteration.

[mishoo]

Here is another possibility. It seems that if I comment out transclude: true and the controller in the directive definitions (lines 312, 315-322) then the scope isn't destroyed any more: http://plnkr.co/edit/Qp1nFcnRirlIoKd3nB4Q?p=preview

Do you think that's an OK fix?

[olexme]

Transclusion is required in kendo directives, this is breaking change.
Reported in issue #285