Rendering Modes in Angular PanelBar
The Kendo UI for Angular PanelBar provides three rendering modes for managing item content, which you can control with the keepItemContent property. These modes let you optimize performance and manage state based on your application needs.
Render Expanded Items Content Only
By default, the PanelBar renders only the content of expanded items. When you collapse an item, its content is removed from the DOM. This behavior is ideal for scenarios where you want to optimize performance by rendering only what's necessary.
The next example demonstrates the default behavior where keepItemContent is false. Expand an item and observe the initialization timestamp. Collapse and expand the item again, and notice how the timestamp updates and any dropdown selection is lost because the item content is destroyed and re-rendered in the DOM during this process.
Lazy Load and Persist Item Content
When the keepItemContent property is set to 'loadOnDemand', expanded items' content is rendered initially. When you expand an item for the first time, its content is rendered and kept in the DOM even after the item is collapsed. This mode balances performance and state management—items are loaded only when needed, but their state is preserved once loaded.
The next example demonstrates the lazy load behavior where keepItemContent is set to 'loadOnDemand'. Expand an item and observe the initialization timestamp. Collapse and expand the item again, and notice how the timestamp remains unchanged and any dropdown selection persists because the item content is kept in the DOM after its first render.
Persist All Item Content
When the keepItemContent property is set to true, the PanelBar renders all item content upfront and keeps it in the DOM, regardless of the expansion state. This mode is suitable for scenarios where you need to preserve the content state of all items and performance is not a primary concern.
The next example demonstrates the PanelBar behavior when keepItemContent is set to true. All preselected dropdown values are displayed at the top, even for items you have not expanded, confirming that all item content is rendered upfront, kept in the DOM, and any selections persist as you expand and collapse items.