We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to Add Diagram control to Dashboard Layout panel


How to Add Diagram control inside Dashboard Layout panel which is added dynamically Using        
let panel: PanelModel = {
        'id': id.toString(), 'sizeX': 2, 'sizeY': 1, 'row': 0, 'col': 0, 'maxSizeX': 4, 'maxSizeY': 2, 'minSizeX': 1, 'minSizeY': 1,
        content: '<div>' + this.display + '</div>',
        header: '<span id="close" class="e-template-icon e-close-icon"></span><div>' + header + '</div>'


please provide sample for the same.



3 Replies

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team January 17, 2020 11:02 AM UTC

Hi Samba, 
Thanks for contacting Syncfusion support. 
We have checked your reported query that render Diagram component dynamically in the Dashboard panel in angular platform. To achieve your requirement, we have added the diagram component to be rendered in the dynamic panel within the ng-template with a template reference along with a ng- container as shown below.  
<!-- placing the custom component within ng-template --> 
<ng-template #CustomTemplate> 
  <div style="height:100%; width: 100%;" class="templateContent"> 
    <!-- placing the diagram component inside the chart root --> 
<!-- adding a ng container to append the template in the container --> 
<ng-container #viewContainer></ng-container> 
In the script side on clicking the button, this template will be initialized to get render in the DOM and the rendered template appended will be added as the content of the panel as shown in the below code. 
  BtnClick() { 
    // adding panel dynamically 
    let panel: PanelModel[] = [{ 
      id: "layout_" + this.count.toString(), 
      'sizeX': 4, 'sizeY': 2, 'row': 2, 'col': 0, 
    //rendes the (CustomTemplate) template in dom 
    const templateValue = this.CustomTemplate.createEmbeddedView(null); 
    // inserts the template into the view container 
    // Obtaining the content element of the panel 
    let panel_Content = document.getElementById("layout_" + this.count.toString() + "_content"); 
    // appending the template to the panel content element. 
Refer the sample link below. In that sample, we have added simple diagram control for your reference. 
Please let us know, if you need any further assistance on this. 
Shameer Ali Baig S. 

DR David Rose July 5, 2022 01:42 AM UTC


How can I use the above described method in a more generic way? I'd like to be able to use several angular components as content and be able to save and restore with the settings for each component.

Our components include (not all are listed):

  • Counter
    • Basic HTML with bindings
    • Parameter Type passed to specify which count
  • Chart
    • Syncfusion Chart
    • Parameters for type, period, etc.
  • List
    • Basic Syncfusion datagrid.
    • Parameters for period, etc.
  • Map
    • Syncfusion maps
    • Parameters

    Here is the static load with only counters.

        <div class="dashboardContainer">
          <ejs-dashboardlayout id='defaultLayout' class="dashboardLayout" [columns]="6" #defaultLayout [cellSpacing]='cellSpacing'
              <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="2">
                <ng-template #content>
                  <app-counter [Type]="0"></app-counter>
              <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="1">
                <ng-template #content>
                  <app-counter [Type]="3"></app-counter>
              <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="0">
                <ng-template #content>
                  <app-counter [Type]="4"></app-counter>
              <e-panel [sizeX]="2" [sizeY]="1" [row]="1" [col]="0">
                <ng-template #content>
                  <app-counter [Type]="7"></app-counter>
              <e-panel [sizeX]="2" [sizeY]="1" [row]="1" [col]="1">
                <ng-template #content>
                  <app-counter [Type]="5"></app-counter>
              <e-panel [sizeX]="2" [sizeY]="1" [row]="1" [col]="2">
                <ng-template #content>
                  <app-counter [Type]="6"></app-counter>



IL Indhumathy Loganathan Syncfusion Team July 6, 2022 10:42 AM UTC

Hi David,

We understand that you want to achieve multiple components from different pages into the Dashboard Layout component. You can render those components in generic way by following the dynamic component rendering way. Similar requirements have been achieved in the below link.


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


Indhumathy L

Live Chat Icon For mobile
Up arrow icon