Hello Syncfusion Team.
We faced an issue with the dashboard layout component.
When user drags panels and then tries to add new one, the dashboard fails with errors in console:
"Error: Cannot read properties of undefined (reading 'row')".
Please see the example below:
1) Go to stackblitz
2) Dragg panel
3) Try to add new panel
4) Observe errors in console
Could you please help with this?
Thank you in advance.
Hi Dmytro,
We have validated your reported issue in the Angular Dashboard Layout component and are able to face the mentioned error. To overcome the error, we suggest you update to the latest version (V20.1.61) in your sample.
Also, after updating to the latest version in your sample, we have been facing the error as mentioned below. To resolve this issue, you need to set the correct proper ID value for the panel.
Check the below code snippet.
[app.component.html] <e-panel ... [id]="item.id">...</e-panel>
[app.component.ts] btnclick(args) { const newportlet = {id: this.count.toString() ...}; this.count++; ... } |
Refer the attached sample and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
Thank you for your quick response,
but as you can see from our example that has been provided in the first message, we use ngFor for rendering panels since we need to provide component inside panel template.
Your example works well as soon we modified it to use ngFor instead of addPanel method we get the same error as before:
please see below
Hi Dmytro,
We understand that while adding and dragging the panel to the Dashboard Layout component, you are facing a script error on the console. The reported issue occurs because the newly added panel is not added within the component. As a result, you must include the panel details in the Dashboard Layout using the addPanel method. Check the below code snippets.
[app.component.ts] btnclick(args) { ... this.count++; this.Dashboard.addPanel(newportlet); ... } |
We have already shared the sample in our previous response. Please check once at your end and get back to us if you need any further assistance..
Regards,
Leo Lavanya Dhanaraj
In your example panels are rendered with no content.
Could you please provide an example where after adding panel it shows content?
Hi Dmytro,
To meet your requirement, we have made some changes to our shared sample. By using the header and content property, you can display the header and content value of the corresponding panel in the Dashboard Layout component while adding the panel dynamically.
Check the below code snippet for your reference.
[app.component.ts] btnclick(args) { const newportlet = { ... content: '<div class="content">Panel Content</div>', header: '<div class="content">Panel ' + this.count + '</div>', }; ... } |
Sample : https://stackblitz.com/edit/angular-dashboard-using-ngfor-n3xst5?file=app.component.ts
Please check the attached sample and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
It still does not meet our requirements since we need to provide angular component inside panel
Hi Dmytro,
From your shared datils, we understand that you want to add the component inside the Dashboard Layout panel. We have achieved the similar requirement in the below forum.
Follow the suggested way as mentioned in the forum and get back to us if you any further assistance.
Regards,
Leo Lavanya Dhanaraj
The following error is still an issue in 20.2.39, upgrading from 20.2.39 to 20.2.43 seems to fix it, or make it more stable. Can anyone at Syncfusion confirm this?
Code:
<ejs-dashboardlayout
id="default_dashboard"
columns="10"
#default_dashboard
[cellSpacing]="cellSpacing"
[allowResizing]="true"
(resizeStop)="onDashboardResize($event)"
(change)="onDashboardChanged($event)"
(created)="onDashboardCreated()"
>
<e-panels>
<e-panel
*ngFor="let widget of activeWidgets; trackBy: widgetTrackBy"
[id]="'panel-' + widget.id"
[sizeX]="widget.sizeX"
[sizeY]="widget.sizeY"
[row]="widget.row"
[col]="widget.col"
>
<ng-template #content>
<div style="height: 100%; width: 100%">
<templateContent [templateValue]="getTemplateComponent(widget)" (close)="onCloseIconHandler($event)">
</templateContent>
</div>
</ng-template>
</e-panel>
</e-panels>
</ejs-dashboardlayout>
Error:
core.mjs:6500 ERROR TypeError: Cannot read properties of undefined (reading 'row')
at DashboardLayoutComponent.checkForSwapping (ej2-layouts.es2015.js:3790:1)
at DashboardLayoutComponent.updatePanelLayout (ej2-layouts.es2015.js:3879:51)
at DashboardLayoutComponent.renderDashBoardCells (ej2-layouts.es2015.js:3333:1)
at DashboardLayoutComponent.initialize (ej2-layouts.es2015.js:2474:1)
at DashboardLayoutComponent.updatePanelsDynamically (ej2-layouts.es2015.js:4847:1)
at DashboardLayoutComponent.onPropertyChanged (ej2-layouts.es2015.js:4946:1)
at DashboardLayoutComponent.dataBind (ej2-base.es2015.js:5099:18)
at DashboardLayoutComponent.dataBind (ej2-base.es2015.js:6980:15)
at timer (zone.js:2405:1)
at _ZoneDelegate.invokeTask (zone.js:406:1)
Hi Stuart,
We have validated your reported issue in the Angular Dashboard Layout component. However, we were unable to replicate the reported issue at our end. For your reference, we have prepared an Angular Dashboard Layout sample with the mentioned version(V20.2.39).
Sample : https://stackblitz.com/edit/angular-dashboard-using-ngfor-foyqvp?file=package.json
We suspect that the issue occurs due to the improper ID mapping. Please ensure that each panel has a unique id at your end as explained in our previous update.
Please see the attached sample. If the issue still persists, reproduce the issue in the above shared sample. These details will help us to check and provide a prompt solution.
Regards,
Leo Lavanya Dhanaraj