Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Ignite UI Dock Manager Add New Document Tab and Activate Existing Tab with jQuery

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 content

// 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

// Activate the pane
document.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 (<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)