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)

  • 1300
    Verified Answer
    Offline posted

    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',



    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.

    Monika Kirkova,

Reply Children
No Data