1. Home
  2. Forum
  3. Angular - EJ 2
  4. Add dynamic components fails when moving a panel.

Add dynamic components fails when moving a panel.

Hi, im testing the Dashboard Layout component. I have problem when add a panel with a dynamic component inside.

I add this panels with a button click and works great, but then when I move one of the panels and then try to add again (click button) the dashboard breaks and throws this error:

core.js:6210 ERROR TypeError: Cannot read properties of undefined (reading 'row')
    at DashboardLayoutComponent.checkForSwapping (ej2-layouts.es2015.js:3768)
    at DashboardLayoutComponent.updatePanelLayout (ej2-layouts.es2015.js:3875)
    at DashboardLayoutComponent.renderDashBoardCells (ej2-layouts.es2015.js:3329)
    at DashboardLayoutComponent.initialize (ej2-layouts.es2015.js:2477)
    at DashboardLayoutComponent.updatePanelsDynamically (ej2-layouts.es2015.js:4843)
    at DashboardLayoutComponent.onPropertyChanged (ej2-layouts.es2015.js:4942)
    at DashboardLayoutComponent.dataBind (ej2-base.es2015.js:5093)
    at DashboardLayoutComponent.dataBind (ej2-base.es2015.js:6733)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28564)

Here is my component:

import { Component, ViewChild } from '@angular/core';
import { GanttEditorHeaderComponent } from '@scs/views/schedule-work-station/scenarios/scenario-dashboard/editors/gantt/gantt-editor-header.component';
import { GanttEditorComponent } from '@scs/views/schedule-work-station/scenarios/scenario-dashboard/editors/gantt/gantt-editor.component';
import { SchedulerEditorHeaderComponent } from '@scs/views/schedule-work-station/scenarios/scenario-dashboard/editors/schedule/scheduler-editor-header.component';
import { ScheduleEditorComponent } from '@scs/views/schedule-work-station/scenarios/scenario-dashboard/editors/schedule/schedule-editor.component';
import { ScsPanelModel } from '@scs/views/schedule-work-station/scenarios/scenario-dashboard/scenario-dashboard-page.component';
import { DashboardLayoutComponent, PanelModel } from '@syncfusion/ej2-angular-layouts';

@Component({
    selector: 'scs-scenario-dashboard',
    template: `
        <div class="d-flex flex-column h-100">
            <div class="flex-btn-bar">
                <button ejs-button (click)="handleAddPanelClick(ganttPanel)">Gantt</button>
                <button ejs-button (click)="handleAddPanelClick(schedulePanel)">Schedule</button>
                <button
                    ejs-button
                    [iconCss]="'fas ' + (lockPanels ? 'fa-lock' : 'fa-lock-open')"
                    (click)="handleLockViewButtonClick()"
                ></button>
            </div>
            <div class="flex-btn-bar">
                <button ejs-button (click)="columns = 1">Sheet</button>
                <button ejs-button (click)="columns = 4">Big Cells</button>
                <button ejs-button (click)="columns = 8">Small Cells</button>
            </div>
            <ejs-dashboardlayout
                class="h-100 flex-fill"
                style="overflow-y: auto"
                id="defaultLayout"
                [columns]="columns"
                [allowDragging]="!lockPanels"
                [allowResizing]="!lockPanels"
                [allowFloating]="!lockPanels"
                [cellSpacing]="[10, 10]"
            >
                <e-panels>
                    <ng-container *ngFor="let panel of panels">
                        <e-panel>
                            <ng-template #header>
                                <ng-container [ngComponentOutlet]="panel.headerComponent"></ng-container>
                            </ng-template>
                            <ng-template #content>
                                <ng-container [ngComponentOutlet]="panel.contentComponent"></ng-container>
                            </ng-template>
                        </e-panel>
                    </ng-container>
                </e-panels>
            </ejs-dashboardlayout>
        </div>
    `,
    styles: [
        `
            :host {
                height: 100%;
            }
        `,
    ],
})
export class ScenarioDashboardComponent {
    @ViewChild(DashboardLayoutComponent) dashboardLayoutComponent: DashboardLayoutComponent;
    columns = 8;

    lockPanels = true;

    ganttPanel = () => ({
        headerComponent: GanttEditorHeaderComponent,
        contentComponent: GanttEditorComponent,
    });
    schedulePanel = () => ({
        headerComponent: SchedulerEditorHeaderComponent,
        contentComponent: ScheduleEditorComponent,
    });

    panels: ScsPanelModel[] = [this.ganttPanel(), this.schedulePanel()];

    handleAddPanelClick(panelFactory) {
        const elementsInPanel = [...this.panels];
        this.panels = [];
        this.dashboardLayoutComponent.refresh();
        this.panels = [panelFactory(), ...elementsInPanel];
        this.dashboardLayoutComponent.refresh();
    }

    handleLockViewButtonClick() {
        this.lockPanels = !this.lockPanels;
    }
}

Our requeriment is that we need to add panels with a dynamic angular component inside (defined in other class) the content (also the header of the panel could be an other component). In my case I have a GanttEditorHeaderComponent and GanttEditorComponent, also ScheduleEditorHeaderComponent and ScheduleEditorComponent, this are simply dummy components for now but they are the proper class (component) in angular. 

How can I achieve to add a dynamic component inside the dashboard layout panel (and header)?

Thanks. 



6 Replies
SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team January 13, 2022 02:09 PM UTC

Hi Cesar, 
 
Greetings from Syncfusion support. 
 
We have validated your reported problem in Dashboard Layout by adding panels dynamically to the layout and perform drag and drop operation. But, we were unable to replicate your reported problem. 
 
Can you please check whether the attached sample help you resolving the reported problem. 
 
 
If your problem still persists, then please revert by replicating your reported problem in the attached sample. It would help us to validate the cause of your reported problem and assist you promptly. 
 
Regards, 
Shameer Ali Baig S. 


CS Cesar Smerling January 13, 2022 09:19 PM UTC

Hello! Are you kidding me!?

The example that you have you are defining the components inside the ng-templates. THAT IS NOT DYNAMIC COMPONENT CREATION!. You have a ViewChild for each template (component). Dynamic is when a component is defined in a variable, you don't know wich component will be render inside the panel, only at runtime you know wich component is inside that variable. Look al my example that I use ng-temeplate with the ngComponentOutlet, because the components ARE DYNAMIC inside a variable. In the code I have I have two dummy components GanttEditorComponent and ScheduleEditorComponent.

I cannot define a ng-template for each component that exists in the world. The user of my component should pass it as inputs. Got it!?

Try the code that I give you. Or at least please that to look at it, try to understand it please. We pay for syncfusion, KBC is our company. I'm getting tired of this king of answers.

Definitely our team will move out from syncfusion components. 


CS Cesar Smerling January 13, 2022 09:42 PM UTC

Here is the stackblitz to the example code I have you.

https://stackblitz.com/edit/dashboard-charts-forlogic-ptkert?file=app%2Fdashboard-layout%2Fscenario-dashboard-layout.component.html


To reproduce the error:

-Click Lock/Unlock to be able to move and resize the panels.

-Move one panel already created.

-Click on Gantt or Schedule to create a new panel with a new dynamic component.

-ERROR!


Attached a video too.


Attachment: DASHBOARD_ERROR_aae7ad6d.zip

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team January 14, 2022 05:04 PM UTC

Hi Cesar, 
 
We regret for the inconvenience. 
 
We were able to replicate your reported problem at our end. We need some time to find the cause of your reported problem. So, we will update you with further validation details in three business days on 19th January 2022. 
 
We appreciate your patience. 
 
Regards, 
Shameer Ali Baig S. 


KR Keerthana Rajendran Syncfusion Team January 19, 2022 12:15 PM UTC

Hi Cesar, 
 
Thanks for your patience. 
 
We have confirmed the scenario “Adding dynamic panels after drag causes error in Dashboard Layout” as a bug. The fix for this issue will be included in the weekly patch release by the mid of February 2022.  
 
You can track the status of this fix from the below portal link. 
 
 
Regards, 
Keerthana R. 


PM Prasanth Madhaiyan Syncfusion Team July 20, 2022 09:21 AM UTC

Hi Cesar,


Thanks for your patience.


We are glad to announce that our patch release (V20.2.39) has been rolled out successfully. The issue with "Adding dynamic panels after drag causes error in Dashboard Layout" has been resolved in this release. To access this fix, we suggest you update the package to the 20.2.39.


Sample : https://stackblitz.com/edit/dashboard-charts-forlogic-2ydtzp?file=package.json


Release notes: https://ej2.syncfusion.com/angular/documentation/release-notes/20.2.39/?type=all#dashboard-layout


Feedback : https://www.syncfusion.com/feedback/31995/adding-dynamic-panels-after-drag-causes-error-in-dashboard-layout


Please let us know if you need any further assistance.


Regards,

Prasanth Madhaiyan.


Loader.
Up arrow icon