Errors in console on panel adding after dragging was performed

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.

Sample : https://stackblitz.com/edit/angular-dashboard-using-ngfor-35eqhf?file=app.component.ts,app.component.html

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

https://stackblitz.com/edit/angular-dashboard-using-ngfor-tcpu86?file=app.component.ts,app.component.html

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.

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.

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.

https://www.syncfusion.com/forums/173731/how-to-render-dynamically-multiple-components-on-the-dashboard-layout-in-angular?reply=S2UMod

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