How to Add Diagram control to Dashboard Layout panel

[Samba Shiva Rao Enuganti]

Hi,

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>'

      };

      this.dashboardObject.addPanel(panel);

method.

please provide sample for the same.

Thanks,

Shiva

[Shameer Ali Baig Sulaiman Ali Baig]

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 --> 

    <chart-root></chart-root> 

  </div> 

</ng-template> 

<!-- 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, 

    }]; 

    this.Dashboard.addPanel(panel[0]); 

    //rendes the (CustomTemplate) template in dom 

    const templateValue = this.CustomTemplate.createEmbeddedView(null); 

    // inserts the template into the view container 

    this.viewContainer.insert(templateValue); 

    // 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. 

    panel_Content.appendChild(templateValue.rootNodes[0]); 

  }   

} 

 

Refer the sample link below. In that sample, we have added simple diagram control for your reference. 

 

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

 

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

 

Regards,  

Shameer Ali Baig S. 

[David Rose]

Query:

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'
        [allowResizing]='allowResizing'>
        <e-panels>
          <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="2">
            <ng-template #content>
              <app-counter [Type]="0"></app-counter>
            </ng-template>
          </e-panel>
          <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="1">
            <ng-template #content>
              <app-counter [Type]="3"></app-counter>
            </ng-template>
          </e-panel>
          <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="0">
            <ng-template #content>
              <app-counter [Type]="4"></app-counter>
            </ng-template>
          </e-panel>
 
          <e-panel [sizeX]="2" [sizeY]="1" [row]="1" [col]="0">
            <ng-template #content>
              <app-counter [Type]="7"></app-counter>
            </ng-template>
          </e-panel>
          <e-panel [sizeX]="2" [sizeY]="1" [row]="1" [col]="1">
            <ng-template #content>
              <app-counter [Type]="5"></app-counter>
            </ng-template>
          </e-panel>
          <e-panel [sizeX]="2" [sizeY]="1" [row]="1" [col]="2">
            <ng-template #content>
              <app-counter [Type]="6"></app-counter>
            </ng-template>
          </e-panel>
        </e-panels>
      </ejs-dashboardlayout>
    </div>



Thanks!

[Indhumathy Loganathan]

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.

http://www.syncfusion.com/forums/173731/how-to-render-dynamically-multiple-components-on-the-dashboard-layout-in-angular?reply=S2UMod

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

Regards,

Indhumathy L