jQWidgets Forums
jQuery UI Widgets › Forums › Angular › qxChart inside jqxDocking window does not work
Tagged: jqxChart jqxDocking
This topic contains 1 reply, has 2 voices, and was last updated by admin 5 months, 1 week ago.
-
Author
-
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 a jqxChart inside a jqxDocking window, an error occurs and the entire layout of the page breaks.
This example is based off of the “Default Functionality” example for jqxDocking.
Here is the error shown in the console:
main.ts:5 ERROR TypeError: Cannot read properties of undefined (reading ‘jqxChart’)
at jqxChartComponent.refresh (jqwidgets-ng-jqxchart.mjs:370:15)
at jqxChartComponent.__updateRect__ (jqwidgets-ng-jqxchart.mjs:114:10)
at jqwidgets-ng-jqxchart.mjs:20:12
at dispatch (jqxcore.js:8:31926)
at bC (jqxcore.js:8:27114)
at Object.trigger (jqxcore.js:8:30324)
at HTMLDivElement.<anonymous> (jqxcore.js:8:36628)
at Function.each (jqxcore.js:8:6134)
at init.each (jqxcore.js:8:2402)
at init.trigger (jqxcore.js:8:36604)This error occurs only when we try to use a jqxChart inside a jqxDocking window. Other controls work (jqxTree, jqxDatatable, jqxGrid for example), it is only when we add a jqxChart into one of the windows that the entire layout is not rendered correctly and we encounter a script error. As a result we are unable to use jqxDocking with the jqxChart component.
I have attached app.component sample files to reproduce the issue. If you run and open the page with the sample files, you should immediately see the script error in the console window upon loading the page.
app.component.html
<jqxDocking [orientation]='"horizontal"' [width]='getWidth()' [mode]='"docked"'> <div> <div id="window1" style="height: 220px;"> <div> Date and Time </div> <div style="overflow: hidden;"> <jqxCalendar [width]='180' [height]='180' style="float: left; margin-right: 10px;"> </jqxCalendar> <h3 style="text-align: center; color: #787878;">Sunny</h3> <div style="float: left; margin-left: 30px; text-align: center;"> <img alt="Sunny" /> </div> <div style="text-align: left; margin-left: 5px; margin-top: 10px; font-size: 10px; float: right; margin-right: 20px;"> Mo: 23 °C<br /> To 25 °C<br /> We: 27 °C </div> </div> </div> <div id="window2" style="height: 220px"> <div> News </div> <div style="overflow: hidden;"> <jqxTabs [width]='375' [height]='181' [selectedItem]='1'> <ul style="margin-left: 30px"> <li>World</li> <li>Local</li> <li>Sports</li> </ul> <div> <div style="padding: 3px; margin: 10px; width: 150px; height: 84px; float: left;"> <img alt="IE6" title="IE6" /> </div> <span style="font-size: 11px;"> Microsoft is set to get a little more pushy ensuring you have an up-to-date browser and will automatically update Internet Explorer... <span style="font-size: 8px;">(BBC)</span> </span> </div> <div> <div style="padding: 3px; margin: 10px; width: 144px; height: 81px; float: left;"> <img alt="Tennis" title="Tennis" /> </div> <span style="font-size: 11px;"> The High Court has dismissed a challenge to laws that require immigrant spouses to be able to speak English in order to live in the UK... <span style="font-size: 8px;">(BBC)</span> </span> </div> <div> <div style="padding: 3px; margin: 10px; width: 130px; height: 73px; float: left;"> <img alt="Tennis" title="Tennis" /> </div> <span style="font-size: 11px;"> British number one Elena Baltacha says Judy Murray is a "fantastic" appointment as Great Britain's new Fed Cup captain... <span style="font-size: 8px;">(BBC)</span> </span> </div> </jqxTabs> </div> </div> </div> <div> <div id="window3" style="height: 220px"> <div> Zodiac </div> <div style="overflow: hidden;"> <jqxPanel [width]='375' [height]='180'> <div style="padding-right: 20px;"> <jqxChart></jqxChart> </div> </jqxPanel> </div> </div> <div id="window4" style="height: 220px;"> <div> E-mail </div> <div style="overflow: hidden;"> <jqxListBox [width]='375' [height]='181' [source]='source'> </jqxListBox> </div> </div> </div> </jqxDocking>
app.component.ts
import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { jqxDockingModule } from 'jqwidgets-ng/jqxdocking'; import { jqxCalendarModule } from 'jqwidgets-ng/jqxcalendar'; import { jqxTabsModule } from 'jqwidgets-ng/jqxtabs'; import { jqxListBoxModule } from 'jqwidgets-ng/jqxlistbox'; import { jqxPanelModule } from 'jqwidgets-ng/jqxpanel'; import { jqxChartModule } from 'jqwidgets-ng/jqxchart' @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, jqxDockingModule, jqxCalendarModule, jqxTabsModule, jqxListBoxModule, jqxPanelModule, jqxChartModule], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'jqw-chart-in-jqxdocking-window'; getWidth(): any { if (document.body.offsetWidth < 650) { return '90%'; } return 650; } source: string[] = [ 'JavaScript Certification - Welcome to our network', 'Business Challenges via Web take a part', 'jQWidgets better web, less time. Take a tour', 'Facebook - you have 7 new notifications', 'Twitter - John Doe is following you. Look at his profile', 'New videos, take a look at YouTube.com' ]; }
Hi,
Please, look at this: https://codesandbox.io/p/sandbox/github/jqwidgets/angular/tree/master/dockinglayout/idelikelayout. This is an example with jqxChart in the Docking layout
Best regards,
Peter Stoev -
AuthorPosts
You must be logged in to reply to this topic.