Two questions:
1. How do you add a new "Document" tab to the Dock Manager with jQuery JavaScript?
2. How do you activate (select) an existing tab with jQuery?
Here is my horrible attempt. This ugly attempt sort-of works, but not really. What is the correct way to do this?
function AddDocumentTab() {
// Add tab to the document host var DocumentHostPanes = FindDocumentHostPanes();
// Create slot DIV for the contentAddNewDockManagerSlotContentDiv(NewContentId);
// New tab info // The contentId must match the content div "slot" attribute // Example: slot = 'content2' var NewContentPane = { type: "contentPane", header: "My New Tab", contentId: "content2", allowMaximize: false, };
// Add to array of tabs DocumentHostPanes.push(NewContentPane);
// Activate the panedocument.getElementById('dockManager').activePane = NewContentPane;}
The problems with my approach above:
1. The new pane looks active, but is not. Clicking it makes it truly active.
2. Setting "activePane" throws the error below.
index-4ea35742.js:1 TypeError: Cannot read properties of undefined (reading 'type') at e.activePaneChange (:52498/Scripts/Infragistics/igniteui-dockmanager-package-1.7.0/package/dist/esm-es5/igc-button-component_20.entry.js:1:50858) at :52498/Scripts/Infragistics/igniteui-dockmanager-package-1.7.0/package/dist/esm-es5/index-4ea35742.js:1:13660 at Array.map (<anonymous>) at setValue (:52498/Scripts/Infragistics/igniteui-dockmanager-package-1.7.0/package/dist/esm-es5/index-4ea35742.js:1:13635) at HTMLElement.set [as activePane] (:52498/Scripts/Infragistics/igniteui-dockmanager-package-1.7.0/package/dist/esm-es5/index-4ea35742.js:1:14032)
Hello Ray,
After investigating this further, I have determined that adding a new Tab to the Dock Manager could be achieved by creating new contentPane and pushing it to the other Dock Manager’s panes. Additionally, please note that modifying any of the properties of the layout object will not trigger an update of the Dock Manager and the whole layout object should be replaced. This could be achieved as follows:
const layout = this.dockManager.layout;
const pane = {
type: "contentPane",
header: 'Document 3',
contentId: 'content5',
};
layout.rootPane.panes[1].panes[0].rootPane.panes[0].panes.push(pane);
this.layout = { ...layout };
this.dockManager.layout = { ...layout };
Furthermore, the active pane of the Dock Manager could be changed by setting its activePane property. If the newly added pane should be set as active, this should be achieved in a requstAnimationFrame:
requestAnimationFrame(() => {
this.dockManager.activePane = pane;
});
Below I am attaching a sample demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
DockManager.zip
That worked perfectly!
Thank you so much!
I am glad that you find my suggestion helpful and were able to achieve your requirement.
Thank you for using Infragistics components.