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

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

1 Reply

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

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. 
 
 
Please let us know, if you need any further assistance on this. 
 
Regards,  
Shameer Ali Baig S. 


Loader.
Live Chat Icon For mobile
Up arrow icon