1. Home
  2. Forum
  3. React - EJ 2
  4. How to reset dashboard drag & drop layout to initial position

How to reset dashboard drag & drop layout to initial position

I want to reset dashboard drag & drop to its initial position. I have read your documentation but didn't find any solution related to this. 
Here is the screenshot of the code example which I have used.
https://tinyurl.com/yyocyrjs

We are using React js with syncfusion-ej2

1 Reply 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team July 23, 2020 10:40 AM UTC

Hi Nikita,  
 
Greetings from Syncfusion support. 
 
We have looked into your query on Dashboard Layout. In DashboardLayout component, using  this serialize() method, you can get the only the panel position properties ( SizeX, SizeY, Row, Col, Id ). Since, content within the panels will vary based on the different user’s need and it might be any HTML elements regardless of Syncfusion controls, we cannot determine the content inside the dashboard panels and their respective configurations. So, we have no in-built functionality in Dashboard Layout to handle the content inside the panels. Therefore, we suggest you to manually save the panel content using general angular based approach based on your requirement. 
 
Refer the below code snippet. 
 
        
<ButtonComponent id="add" cssClass="e-info" onClick={this.SavePanel.bind(this)}>Save</ButtonComponent> 
                         <ButtonComponent id="add" cssClass="e-info" onClick={this.RestorePanel.bind(this)}>Restore</ButtonComponent> 
 
 SavePanel() { 
 //Save the panel position 
      this.restoreModel = this.dashboardObj.serialize(); 
    } 
RestorePanel(){ 
 //Assign the panel position to the DashboardPanel 
 this.dashboardObj.panels = this.restoreModel; 
} 
 
Refer the sample link. 
 
Refer the below link for State maintenance in DashboardLayout component. 
 
 
Refer the below links to know more about the DashboardLayout component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
Loader.
Up arrow icon