This is a migrated thread and some comments may be shown as answers.

Angular 2 - Panelbar Inner Components get (re-)constructed too often ...

4 Answers 60 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Alexander
Top achievements
Rank 1
Alexander asked on 17 Feb 2017, 03:03 PM

The Angular 2 panel bar creates its contents again and again on every event, when its contents needs displayed. This seems not to hurt much, when the inner structure is merely a few simple DOM Elements. But what, if the embedded component expensive to be constructed (because it may need a server request) and possibly very complex (because it may be host to a sohphisticated spreadsheet component, which it is in my case)?

Here is an example (full source in Plunker here): assume you are nesting the expensive component in the panelbar, just like the examples suggest to do:

<kendo-panelbar>
   <kendo-panelbar-item [title]="'First Title'">
      <template kendoPanelBarContent>
         <my-expensive-component></my-expensive-component>
      </template>
   </kendo-panelbar-item>
   <kendo-panelbar-item [title]="'Second Title'">...</kendo-panelbar-item>
</kendo-panelbar>

 

Initially, the panel bar just only the headers "First...", "Second"... when you open one of them, the content is created. That will take some while. When this is finished, the full content is visble. Now when you click on the "Second" panel, a strange thing happens: the second content is lazily created (that's ok) but also the first section is created again, even if it remains visible all the time. That is unexpected.

Even if the above behaviour is only a bug, I fear that the design of the PanelBar component is a bit too simplistic: whenever one opens / closes one of the panels in the stack, the inner component will be constructed, again and again and again ... can this be avoided? 

If it would be only about the private data, one could think of a workaround, where the data is stored not in the component, but in a service, which gets injected. That would not necessarily result in beautiful code, but it may do the trick for the component's data. But what about inner complex DOM structure? My use case is, that inside the panel bar, I would like to put an Excel Spreadsheet (SpreadJS) - I would not just recreated the entire spreadsheet, on every show/hide event.

By the way - the same problem also applies to the Angular-Tab component. That one seems to have the identical create-from-template behaviour. Is there anything I can do about the frequent reconstruction of the components?

4 Answers, 1 is accepted

Sort by
0
Alexander
Top achievements
Rank 1
answered on 17 Feb 2017, 03:17 PM
The Plunker link is not working... the sample is here embed.plnkr.co/KAHJLzfJdCuv59Drym4a
0
Alexander
Top achievements
Rank 1
answered on 17 Feb 2017, 03:18 PM
The Plunker link is not working... it's here https://embed.plnkr.co/KAHJLzfJdCuv59Drym4a
0
Accepted
Dimiter Topalov
Telerik team
answered on 21 Feb 2017, 01:12 PM
Hello Alexander,

Thank you for contacting us. The described issue is fixed in the latest PanelBar version, and the content of an expanded item is not recreated when another item is expanded (if the first one remains open):

http://plnkr.co/edit/hiPtZPG1d6fJpA4p8gGC?p=preview

As for destroying and recreating the item's content on collapse/expand, we are working on a providing a configuration option, similar to the TabStrip's keepTabContent one that will allow the developer to configure whether a PanelBar item's content should be persisted in the DOM.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alexander
Top achievements
Rank 1
answered on 22 Feb 2017, 01:21 PM
That makes perfect sense. Thanks for your answer.
Tags
PanelBar
Asked by
Alexander
Top achievements
Rank 1
Answers by
Alexander
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or