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

5 posts, 1 answers
  1. Alexander
    Alexander avatar
    4 posts
    Member since:
    Nov 2016

    Posted 17 Feb Link to this post

    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?

  2. Alexander
    Alexander avatar
    4 posts
    Member since:
    Nov 2016

    Posted 17 Feb Link to this post

    The Plunker link is not working... the sample is here embed.plnkr.co/KAHJLzfJdCuv59Drym4a
  3. Alexander
    Alexander avatar
    4 posts
    Member since:
    Nov 2016

    Posted 17 Feb Link to this post

    The Plunker link is not working... it's here https://embed.plnkr.co/KAHJLzfJdCuv59Drym4a
  4. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    628 posts

    Posted 21 Feb Link to this post

    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.
  5. Alexander
    Alexander avatar
    4 posts
    Member since:
    Nov 2016

    Posted 22 Feb Link to this post

    That makes perfect sense. Thanks for your answer.
Back to Top