Dashboard Layout Panel content is not showing up

Nikunj Panchal

Asked On September 9, 2019 08:31 PM UTC

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

Reply | Reply with quote

Ashokkumar Balasubramanian [Syncfusion]

Replied On September 10, 2019 01:22 PM UTC

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.

https://stackblitz.com/edit/react-ts-whgo5t?file=index.tsx

Please let us know, if you have any concern on this.

Regards,

Ashokkumar B.

Reply | Reply with quote

Nikunj Panchal

Replied On September 10, 2019 02:34 PM UTC

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);
    });
  }

Reply | Reply with quote

Ashokkumar Balasubramanian [Syncfusion]

Replied On September 11, 2019 10:24 AM UTC

Hi Nikunj Panchal,

Most Welcome.

Please let us know, if you require any further assistance.

Regards,

Ashokkumar B.

Reply | Reply with quote

Nikunj Panchal

Replied On September 11, 2019 05:40 PM UTC

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

Reply | Reply with quote

Narayanasamy Panneer Selvam [Syncfusion]

Replied On September 12, 2019 02:37 PM UTC

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.

Demo sample: https://stackblitz.com/edit/react-ts-a1ze5h?file=index.tsx

Regards,

Narayanasamy P.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147406	Sep 9,2019 08:31 PM UTC	Sep 12,2019 02:37 PM UTC	React - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US