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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to Add Diagram control to Dashboard Layout panel

Thread ID:

Created:

Updated:

Platform:

Replies:

150694 Jan 16,2020 10:47 AM UTC Jan 17,2020 11:02 AM UTC Angular - EJ 2 1
loading
Tags: DashboardLayout
Samba Shiva Rao Enuganti
Asked On January 16, 2020 10:47 AM UTC

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 [Syncfusion]
Replied On 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 --> 
    <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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon