Adding a Pane dynamically to a Dock Manager

Hi,

Is there a way to add a Pane to the Dockmanager dynamically during run time. There is a Remove Pane function available with the latest Dockmanager version but could not find one for adding a new pane without having to reassign the layout Json.

Hello Sruthi,

Please refer to the documentation on our website regarding updating the dockmanager during run time:

Please note that modifying any of the properties of the layout object will not trigger an update of the Dock Manager. If that is your goal, you should replace the whole layout object like so:

const layout = this.dockManager.layout;
layout.rootPane.orientation = IgcSplitPaneOrientation.vertical;
this.dockManager.layout = { ...layout };

More info here:

https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager

However, you can still add panes to your dockmanager using the above method. Please refer to the following sample:

https://stackblitz.com/edit/add-new-pane-dockmanager-programatically?file=src%2Fapp%2Fdock-manager-sample%2Fdock-manager.component.ts

Should you have any further questions, please let me know.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragistics

This really Helped . Thank you !!

Glad to hear this has helped you.

Thank you for using Infragistics components.

Tihomir Tonev
Associate Software Developer
Infragistics

Hello,

This shows how to add a pane and frankly, I have already come to that point following the layout directions. However, I can't find any reference, how can I add data, component, text, html, anything in that new Pane I created. 

I find it impossible for that to be the case since, there is no point to be able to create a new Pane without being able to fill it up with content.

One more thing, I know that this panel can be assigned an html element, that has been created inside the igc-dockmanager element html code. But my task here, is to allow the users click a button and create a new tab with content downloaded from an API.

Is this something doable? If it is, why is it so difficult to find out how?

Thank you in advance

Thanks for the example.

stackblitz.com/…/add-new-pane-dockmanager-programatically

Can provide example for how to add new tab to the stack (Middle layer of the layout next to document 2 tab) 

Please ignore my post, its answered in below ticket.

https://account.infragistics.com/support-cases/5005w00001tzu1mAAA

Here you can find the modified sample.

stackblitz.com/…/igc-dockmanager-programmatically-add-pane-tabgrouppane