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

Dashboard Layout Panel content is not showing up

Hello,

I am using Dashboard layout for my home page. I added a portlet on page load which is not showing up the content when page loads. 

However I have a add button which add the portlet dynamically. I can able to see the content for this portlet but I cannot see content for portlet which added on page load.

Please help me and let me know any question you may have.


Thanks,
Nikunj




Attachment: index_276c4afe.rar

5 Replies

AB Ashokkumar Balasubramanian Syncfusion Team September 10, 2019 08:22 AM

Hi Nikunj Panchal, 
 
We have checked your query and tried to reproduce the reported case with creating simple sample with react quick start application and online editor. But unfortunately, your reported issue is reproduced in react quick start application but not reproduced when deploying the sample in online editors. By default, the component will work in your tried approach. 
  
However, we are ensuring why the component behavior was not working when compared with online editors. Also, we need a timeline to validate this issue and update the further status within two business days. 
  
For your reference, we have prepared the sample with content updated through method call in below link. 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 



NP Nikunj Panchal September 10, 2019 09:34 AM

Hello Ashokkumar,


Thanks for your quick reply.

I go through the sample that you provided. I see that you inherit content0 method from JSX.Element under the file with TSX extension. This works well.

I have also fixed with the below approach with JSX extension:
 
componentDidMount() {
setTimeout(() => {
this.rendereComplete();
});
}

rendereComplete() {
console.log('rendereComplete');
debugger;
// eslint-disable-next-line array-callback-return
this.defaultportlets.map((portlet) => {
this.scDashbard.addPanel(portlet);
});
}


AB Ashokkumar Balasubramanian Syncfusion Team September 11, 2019 05:24 AM

Hi Nikunj Panchal, 
 
Most Welcome. 
 
Please let us know, if you require any further assistance. 
 
Regards, 
Ashokkumar B. 



NP Nikunj Panchal September 11, 2019 12:40 PM

Hello,

I am trying to load dynamic content on panel on the dashboard layout. I can get the content but while loading content, I would want to show spinner.

How can I achieve this?


Thank you,
Nikunj


NP Narayanasamy Panneer Selvam Syncfusion Team September 12, 2019 09:37 AM

Hi Nikunj, 
 
Thanks for the further update. 
 
We have checked your query “how to add spinner while dashboard layout content loaded”. To achieve this, you have to create a spinner element through dashboard layout’s created event. Now spinner element is ready to show during dashboard layout content change, you need to call showSpinner method on dashboard layout content change. 
Refer the below code snippet to show spinner. 
changeContent() { 
    // Show the Spinner element 
    showSpinner(document.getElementById("layout_0")); 
    // Change the content of dashboard layout 
    let panel: any = { id:"layout_0", content:this.lineTemplate, header:"<div>Column chart</div>"  }; 
    this.dashboardObj.updatePanel(panel); 
    setTimeout(function(e) { 
      // Hide the spinner element 
      hideSpinner(document.getElementById("layout_0")); 
    },1000) 
  } 
 
 
We have prepared a simple sample to meet your requirement. Spinner will show on button click, when once the dashboard layout content has changed.  
 
 
Regards,  
Narayanasamy P.  


Loader.
Live Chat Icon For mobile
Up arrow icon