more than one panel not working

[Namita]

I am trying to show panels on dashboard. One panel contains column chart, along with this no other panel is showing. 

Here is my code.

  ERROR TypeError: Cannot read property 'setProperties' of undefined

     at 

DashboardLayoutComponent.push../node_modules/@syncfusion/ej2-layouts/src/das

hboard-layout/dashboard-layout.js.DashboardLayout.panelPropertyChange 

(dashboard-layout.js:1105)

     at 

DashboardLayoutComponent.push../node_modules/@syncfusion/ej2-layouts/src/das

hboard-layout/dashboard-layout.js.DashboardLayout.onDragStart 

(dashboard-layout.js:2161)

     at Draggable.drag (dashboard-layout.js:2078)

     at 

Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.n

otify (observer.js:99)

     at 

Draggable.push../node_modules/@syncfusion/ej2-base/src/base.js.Base.trigger 

(base.js:181)

     at 

Draggable.push../node_modules/@syncfusion/ej2-base/src/draggable.js.Draggabl

e.intDrag (draggable.js:360)

     at 

ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTas

k (zone.js:421)

     at Object.onInvokeTask (core.js:26247)

     at 

ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTas

k (zone.js:420)

     at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask 

(zone.js:188)

 defaultErrorLogger @ core.js:4002

  

  

 HTML Code is also given below:

  

  

  

 <div class="dashboardParent" *ngIf="showDashboardLayout">

           <ejs-dashboardlayout id='editLayout' #editLayout [columns]="6" 

[cellAspectRatio]='aspectRatio' [cellSpacing]='cellSpacing' 

[allowResizing]='true'>

             <!---------------------------code here for dynamic 

panel(rendering)------------ [panels]='panels'------------------------>

             <e-panels>

               <!-- <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="2">

     <ng-template #header>

       <div>Employee Details</div>

     </ng-template>

     <ng-template #content>

       <div>

         <app-chart></app-chart>

       </div>

     </ng-template>

   </e-panel>-->

               <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="2">

                 <ng-template #content>

                   <div class="card">

                     <span class="e-icons profile"></span>

                     <div class="card-content text">

                       Users

                     </div>

                     <div class="card-content number">

                       64,496

                     </div>

                   </div>

                 </ng-template>

               </e-panel>

               <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="4">

                 <ng-template #content>

                   <div class="card">

                     <span class="e-icons views"></span>

                     <div class="card-content text">

                       Views

                     </div>

                     <div class="card-content number">

                       442,278

                     </div>

                   </div>

                 </ng-template>

               </e-panel>

             </e-panels>

           </ejs-dashboardlayout>

  

         </div>

Thanks

Type a message

[Sowmiya Padmanaban]

Hi Namita,  

 

Greetings from Syncfusion support. 

 

We have checked your reported problem with DashboardLayout component. It's already a known issue, and this issue has been resolved in our latest patch release. (V18.2.57). We suggest you to update the Syncfusion Angular packages in your application to their latest version (V18.2.57) to resolve your reported problem. 

 

Refer the below sample for your reference. 

 

https://www.syncfusion.com/downloads/support/forum/157732/ze/DashboardLayout-12317109.zip 

 

If the issue still persists, then could you please share us the following details. It will help us to resolve your problem at the earliest. 

 

1.     Share us the package.json file from your application. 

2.     Share us the issue screenshot/ video footage. 

3.     If possible, replicate the issue in attached sample and share it to us. 

 

To know more about DashboardLayout component, please refer the following links.   

 

UG Documentation	https://ej2.syncfusion.com/angular/documentation/dashboard-layout/getting-started/
Demo link	https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default
API reference	https://ej2.syncfusion.com/angular/documentation/api/dashboard-layout/

   

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P