Hi,
I have gone through all the provided documentations related to the Dashboard Layout using Angular. So I have few points?
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.
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
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
<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> |
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
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
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..
Thanks
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
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
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
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
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:
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