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

State Maintenance of dashboard panels with template inside of them

Thread ID:





148086 Oct 4,2019 11:56 AM UTC Oct 8,2019 06:24 AM UTC Vue 3
Tags: DashboardLayout
Asked On October 4, 2019 11:56 AM UTC

I'm trying to make the position and the content of the panels persistent. So I looked at the page for the State Maintenace and then tried to replicate it but using templates as content instead of static html. But all the time, my panels are getting returned empty. This is what my code looks like:
const Position = this.$refs.dashboard.$el.ej2_instances[0].serialize();
Position[0][":content"] = "cTemplate(e)";

So I guess the cTemplate function is not returning value yet (it's inside the data) so it's returning nothing. Is there another way to do it?

Ashokkumar Balasubramanian [Syncfusion]
Replied On October 7, 2019 11:16 AM UTC

Hi Matthieu, 
Good day to you. 
We have checked your reported query about state maintenance. You are able to maintain the state of dashboard layout panels using serialize() method.  In that method, you can get the dashboard layout panels element values such as position properties (row, column) and dimension properties (sizeX, sizeY). But the content of the dashboard layout panels needs to persist and update manually, because content value is not handled by component side. 
Refer the below code snippet to add the panel content manually to the dashboard layout. 
 // Save the current panels 
    onSave: function(args) { 
        // Create instances for dashboardlayout element 
        this.$refs.restoreModel = this.$refs.DashbordInstance.$el.ej2_instances[0].serialize(); 
        this.$refs.restoreModel[0].content = this.pie; 
        this.$refs.restoreModel[1].content = this.pieChart; 
        this.$refs.restoreModel[2].content = this.spline; 
For your reference we have prepared a simple sample. In that sample, we have rendered chart as a panel content and maintain the state of the panels using serialize() method. 
Refer the sample link below. 
Please let us know, if you have any concerns. 
Ashokkumar B. 

Replied On October 7, 2019 04:17 PM UTC

Hi Ashokkumar,
Thanks for the help. I now got it working. Was close at the beginning, was just missing the "this" keyword before my function Template.

Ashokkumar Balasubramanian [Syncfusion]
Replied On October 8, 2019 06:24 AM UTC

Hi Matthieu, 
We are glad to hear that the problem has been resolved. Please let us know, if you need any further assistance. 
Ashokkumar B. 


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