How to render dynamically multiple components on the Dashboard Layout in angular?

[Naveen Bangwal]

Hi,

I have gone through all the provided documentations related to the Dashboard Layout using Angular. So I have few points?

1. I want to design my page like below, Where I need to have 2 buttons for every panel, one for delete and another for add the widget.

2. I want to render widget from a list, which will be displayed after clicking on setting icon.

3. After selecting the desired widget it should render on the particular panel. So I don't want to write fix code I want it to be rendered dynamically from the component side and front end rendering would be like :

  <ejs-dashboardlayout id="api_dashboard" #default_dashboard columns="6" [allowResizing]="true"

                [cellSpacing]='cellSpacing'>

                <e-panels>

                    <e-panel *ngFor="let panel of panelsData" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY"

                        [row]="panel.row" [col]="panel.col">

                        <ng-template #header>

                        </ng-template>

                        <ng-template #content>

                        </ng-template>

                    </e-panel>

                </e-panels>

            </ejs-dashboardlayout>

I hope you got every detail. Please help me out and if you find any other solution or approach, Please share it.

Thanks in advance.

[Indhumathy Loganathan]

Hi Naveen, 

 

Greetings from Syncfusion support. 

 

We have prepared a simple Dashboard Layout sample to meet your requirements. The Dashboard component is a simple layout component. You can render any component inside the panel as per your requirement. For your reference, we render all panels with an icon to add components. We have opened a dialogue popup to choose the required component option while clicking on that icon. 

 

We have simply rendered a button component as a panel content while choosing an option in the dialogue popup. In a similar way, you can add your required component as panel content by following the shared sample way. 

 

https://stackblitz.com/edit/angular-lfuref?file=app.component.ts 

 

Also, please check the below demo for reference. 

 

https://ej2.syncfusion.com/demos/#/bootstrap5/dashboard-layout/dynamic-widget.html 

 

Please check the sample and get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Naveen Bangwal]

Hi,

I want to render component dynamically in a loop on the panel like below.

<ejs-dashboardlayout id="api_dashboard" #default_dashboard columns="6" [allowResizing]="true"

                [cellSpacing]='cellSpacing'>

                <e-panels>

                    <e-panel *ngFor="let panel of panelsData" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY"

                        [row]="panel.row" [col]="panel.col">

                        <ng-template #header>

                        </ng-template>

                        <ng-template #content>

                        </ng-template>

                    </e-panel>

                </e-panels>

            </ejs-dashboardlayout>

Thanks

[Naveen Bangwal]

Hi,

I want to display content dynamically from the component. I don't want to be restricted for designing of panels on the front end. Everything would be dynamic in my case. Content could be like, pie chart, line chart, form, grid etc. on any panel. So I will decide the position of the particular panel from the backend.

So please create a sample and provide solution related to my query. I am still waiting for your response.    

Thanks

[Indhumathy Loganathan]

Hi Naveen, 

 

As requested, we have modified the sample to render Dashboard panels using ngFor. Please check the below code snippet. 

 

<ejs-dashboardlayout 

  id="default_dashboard" 

  #default_dashboard 

  columns="2" 

  [allowResizing]="true" 

  [cellSpacing]="cellSpacing" 

> 

  <e-panels> 

    <e-panel 

      *ngFor="let panel of panelsData" 

      [id]="panel.id" 

      [sizeX]="panel.sizeX" 

      [sizeY]="panel.sizeY" 

      [row]="panel.row" 

      [col]="panel.col" 

    > 

      <ng-template #content> 

        <span 

          style="float:right; margin-right:40px;padding-top:10px;font-weight: bold;" 

          (click)="addWidget($event)" 

          >ⓘ</span 

        > 

        <span 

          id="close" 

          class="e-template-icon e-close-icon" 

          (click)="onCloseIconHandler($event)" 

        ></span> 

        <div class="e-panel-container"> 

          <div class="text-align" id="panel_0">{{ panel.id }}</div> 

        </div></ng-template 

      > 

    </e-panel> 

  </e-panels> 

</ejs-dashboardlayout> 

 

Sample: https://stackblitz.com/edit/angular-lfuref-bpghgo?file=app.component.html 

 

Please check the sample and get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Naveen Bangwal]

Hi,

Now please add some charts or grid in it dynamically after choosing from the dialog. It would be a great help if you get the success.

Thanks

[Indhumathy Loganathan]

Hi Naveen, 

 

As requested, we have modified the sample to render Grid and Chart components based on the selected option in the dialogue popup. We have rendered the component in the corresponding Panel from where the Dialogue popup is opened. Please find the modified sample below the link. 

 

https://stackblitz.com/edit/angular-lfuref-bpghgo?file=app.component.ts 

 

Similarly, you can add the required component as per your request. Please get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Naveen Bangwal]

Hi,

How can I achieve to add a dynamic component inside the dashboard layout panel ?

you are just creating chart or gird on the panel and appending it to the desired div. But what, if I have to render particular component inside that desired div.

Suppose I have created a component which will take data in @input variable and will act accordingly. Let it render the LineChart for supplied @input data.

And I have listed that particular component in the list from where I choose the widget to load on a particular panel.

So my concern is to load that particular component on the particular panel of Dashboard wherever I will choose it from the list. One more thing I don't want to use any unnecessary DOM container to load all these things.

Please try to provide solution as soon as possible.

Thanks

[Keerthana Rajendran]

Hi Naveen, 

In the previous sample, we have created Chart dynamically when it is chosen to add. Whether you need to create the component(Chart/Grid) during initial rendering and append the existing component directly as the panel content for Dashboard Layout?  

Refer to the following UG link and confirm whether this is your exact requirement? 

UG link: https://ej2.syncfusion.com/angular/documentation/chart/how-to/dynamic-chart/ 

If not, kindly elaborate on your use case requirement with few more details to serve you better. 

Regards, 

Keerthana R. 

 

[Naveen Bangwal]

Hi,

I don't understand why are you not getting my point. I have already shared my use case in my previous message. Please go through it.

But still let me share it again for you......

As you know I am creating a dynamic dashboard with some features to add widget (by selecting from a list) on a particular panel. We can add the selected widget on a pre render panel or can add on a newly created panel. 

So I have some queries..

1. How can I render a separate component on panel after choosing from a list ? Now suppose I want to render a user's  bar chart and the code for that chart is written on the separate component (let say.. user.barchart.component.ts). So user.barchart.component .ts takes a @input variable (let say, data) which is used as a datasource for the chart. Now I want to render that user.barchart.component.ts on my panel wherever I choose it from the list. Let me remind you I want to pass the data source from parent component (which is dashboard.component.ts is in my case.) to child component ( user.barchart.component.ts) on the @input variable after choosing userbarchart widget from the list.  
2.  I want to save the dashboard data to the database. Wait.. I know about the serialize() method, which only saves the col, row, sizeX, sizeY not the header and component data. So please provide me a way to save the whole dashboard.

   Thanks

[Indhumathy Loganathan]

Hi Naveen,

Please find the answer for your queries.

Query 1: How can I render a separate component on panel after choosing from a list ?

We have modified the sample to update the panel content with the chart or bar chart from the separate component page while choosing an option from the popup. By using the selector value, we append the component from the different pages inside the panel. Check the below code snippet.

[app.component.html]

<div id="list" style="height:100%;width:100%;display:none">

  <chart-root></chart-root>

</div>

<div id="bar" style="height:100%;width:100%;display:none">

  <bar-root></bar-root>

</div>

 

[app.component.ts]

document.getElementById('linetemplate').onclick = () => {

  this.dialogObj.hide();

  var element = document.getElementById('list');

  element.style.display = 'block';

  var id = this.target.closest('.e-panel').querySelector('.text-align').id;

  document.getElementById(id).appendChild(element);

};

document.getElementById('bartemplate').onclick = () => {

  this.dialogObj.hide();

  var element = document.getElementById('bar');

  element.style.display = 'block';

  var id = this.target.closest('.e-panel').querySelector('.text-align').id;

  document.getElementById(id).appendChild(element);

};

Please find the modified sample from below link.

https://stackblitz.com/edit/angular-lfuref-xyfmxu?file=app.component.ts

Query 2: How to save the dashboard data to the database?

In the Dashboard Layout component, the Serialize method is used to store panel details, but it doesn't store the panel content details. Since the content within the panels will vary based on the different users need and it might be any HTML elements regardless of Syncfusion controls, we cannot determine the content inside the dashboard panels and their respective configurations. So, we have no in-built functionality in Dashboard Layout to handle the content inside the panels. Therefore, we suggest you to manually save the panel content in your application.

Please get back to us if you need any further assistance.

Regards,

Indhumathy L

[Naveen Bangwal]

Hi,

What are you doing? you serious ?.. you are just providing temporary solution. ​I can't do like this trash. 

If you will have 100 components then will you render all of those just like below? 

Have you ever heard about the Dynamic Component loading in angular ? Please use that and update the sample code. 

Never imagined that you would provide such solution. Please use features like a pro.

Thanks

[Indhumathy Loganathan]

Hi Naveen,

In our previous update, we just shared with you a demonstration of setting panel content from another component page. Since you want to achieve this by using Dynamic component loading concept of angular, we need some additional time to prepare the sample for this case. We will update you with further details on or before April 7, 2022. We appreciate your patience.

Regards,

Indhumathy L

[Indhumathy Loganathan]

Hi Naveen

Thanks for your patience.

As requested we have modified the sample to meet your requirement. We have used ng-template to render dynamic component from different pages and used @ViewChildren to get all the template references. By matching the panel index with the reference index we rendered the panel inside the corresponding panel. Check the below sample for reference.

https://stackblitz.com/edit/angular-lfuref-hvrd7k?file=app.component.ts

In the above sample, we just demonstrated a way to achieve your requirement. Similar to this, you can modify the sample based on your requirement. Please get back to us if you need any further assistance.

Regards,

Indhumathy L

[Stuart Zahn]

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)

[LeoLavanya Dhanaraj]

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