jqxDockingLayout does not work

[jq-angular-tryParticipant]

Hello,

We are evaluating jqWidgets for use in our web application.

This is with jqwidgets-ng version 20.0.0 and Angular version 17.3.0 on Windows 10 with npm version 10.5.2 and node version v20.13.1

When using the “Default Functionality” demo of the jqxDockingLayout, we encounter an error and the jqxDockingLayout breaks.

Here is the error shown in the console:

ERROR TypeError: Cannot read properties of undefined (reading ‘startsWith’)
at e.<computed>._selectAt (jqxribbon.js:8:13154)
at HTMLLIElement.r (jqxribbon.js:8:14890)
at HTMLLIElement.dispatch (jqxcore.js:8:31926)
at HTMLLIElement.bC (jqxcore.js:8:27114)
at _ZoneDelegate.invokeTask (zone.js:402:33)
at core.mjs:14556:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:14556:36)
at _ZoneDelegate.invokeTask (zone.js:401:38)
at Object.onInvokeTask (core.mjs:14869:33)
at _ZoneDelegate.invokeTask (zone.js:401:38)

This error occurs for any example we try to use of jqxDockingLayout, and as a result we are unable to use jqxDockingLayout at all.

With the attached app.component files below, when the page is opened, try to switch between the “Document 1” and “Document 2” tabs, and you should encounter the script error.

Here are our files to replicate the issue in a small sample project:

app.component.html

<jqxDockingLayout #dockingLayoutReference [width]="getWidth()" [height]='600' [layout]='layout'>
  <!--The panel content divs can have a flat structure-->
  <!--autoHideGroup-->
  <div data-container="ToolboxPanel">
    List of tools
  </div>
  <div data-container="HelpPanel">
    Help topics
  </div>
  <!--documentGroup-->
  <div data-container="Document1Panel">
    Document 1 content
  </div>
  <div data-container="Document2Panel">
    Document 2 content
  </div>
  <!--bottom tabbedGroup-->
  <div data-container="ErrorListPanel">
    List of errors
  </div>
  <!--right tabbedGroup-->
  <div data-container="SolutionExplorerPanel">
    <div id="treeContainer" style="border: none;"></div>
  </div>
  <div data-container="PropertiesPanel">
    List of properties
  </div>
  <!--floatGroup-->
  <div data-container="OutputPanel">
    <div style="font-family: Consolas;">
      <p>
        Themes installation complete.
      </p>
      <p>
        List of installed stylesheet files. Include at least one stylesheet Theme file and
        the images folder:
      </p>
      <ul>
        <li>
          styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
          be always included in your project.
        </li>
        <li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
        <li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
        <li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
      </ul>
    </div>
  </div>
</jqxDockingLayout>

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { jqxDockingLayoutModule } from 'jqwidgets-ng/jqxdockinglayout'
import { jqxTreeModule } from 'jqwidgets-ng/jqxtree'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CommonModule, jqxDockingLayoutModule, jqxTreeModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'jqw-docking-layout';
  layout: any[] = this.generateLayout();
  getWidth(): any {
    if (document.body.offsetWidth < 800) {
      return '90%';
    }

    return 800;
  }
  generateLayout(): any[] {
    let layout = [
      {
        type: 'layoutGroup',
        orientation: 'horizontal',
        items: [{
          type: 'autoHideGroup',
          alignment: 'left',
          width: 80,
          unpinnedWidth: 200,
          items: [{
            type: 'layoutPanel',
            title: 'Toolbox',
            contentContainer: 'ToolboxPanel'
          }, {
            type: 'layoutPanel',
            title: 'Help',
            contentContainer: 'HelpPanel'
          }]
        },
        {
          type: 'layoutGroup',
          orientation: 'vertical',
          width: 500,
          items: [{
            type: 'documentGroup',
            height: 400,
            minHeight: 200,
            items: [{
              type: 'documentPanel',
              title: 'Document 1',
              contentContainer: 'Document1Panel'
            },
            {
              type: 'documentPanel',
              title: 'Document 2',
              contentContainer: 'Document2Panel'
            }]
          },
          {
            type: 'tabbedGroup',
            height: 200,
            pinnedHeight: 30,
            items: [{
              type: 'layoutPanel',
              title: 'Error List',
              contentContainer: 'ErrorListPanel'
            }]
          }]
        },
        {
          type: 'tabbedGroup',
          width: 220,
          minWidth: 200,
          items: [
            {
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel',
              initContent: () => {
                // initialize a jqxTree inside the Solution Explorer Panel
                let source = [{
                  label: 'Project',
                  expanded: true,
                  items: [
                    {
                      label: 'css',
                      expanded: true,
                      items: [{
                        label: 'jqx.base.css'
                      },
                      {
                        label: 'jqx.energyblue.css'
                      }, {
                        label: 'jqx.orange.css'
                      }]
                    },
                    {
                      label: 'scripts',
                      items: [{
                        label: 'jqxcore.js'
                      },
                      {
                        label: 'jqxdata.js'
                      }, {
                        label: 'jqxgrid.js'
                      }]
                    },
                    {
                      label: 'index.htm'
                    }]
                }];
                jqwidgets.createInstance('#treeContainer', 'jqxTree', { width: '100%', height: '99%', source: source })
              }
            },
            {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
        }]
      },
      {
        type: 'floatGroup',
        width: 500,
        height: 300,
        position: {
          x: 350,
          y: 250
        },
        items: [{
          type: 'layoutPanel',
          title: 'Output',
          contentContainer: 'OutputPanel',
          selected: true
        }]
      }];
    return layout;
  }
}

[adminKeymaster]

Hi,

Please, take a look at this: https://codesandbox.io/p/sandbox/github/jqwidgets/angular/tree/master/dockinglayout/defaultfunctionality?file=%2Fsrc%2Fapp%2Fapp.component.ts

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts