Set content of panel from React class

[Jonathan Trachtenberg]

I have a panel that is initialized from HTML as below:

            <div id="createUser" className="e-panel" data-row="1" data-col="0" data-sizex="1" data-sizey="1">

              <span id="close" className="e-template-icon e-clear-icon"/>

              <div className="e-panel-container">

                <div className="text-align"><CreateUserForm inUser={this.state.user} nameHandler={this.passName}/></div>

              </div>

            </div>

I want to be able to dynamically remove and restore this panel.  Remove is no problem, but when I want to restore the panel, how can I execute the react component class correctly?  How do I create a panel dynamically that takes its content from the react component class - while still properly passing in the prop values (inUser and nameHandler)?

[Sowmiya Padmanaban]

Hi Jonathan,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with DashboardLayout component.  

 

Query 1- I want to be able to dynamically remove and restore this panel.  Remove is no problem, but when I want to restore the panel, how can I execute the react component class correctly? 

 

Based on your shared details, we found out the you are using inline-rendering for render the DashboardLayout component. You can restore the panel using serialize method of DashboardLayout component.  

 

Refer the below code snippet. 

 

 save() { 

      this.restoreModel = this.dashboardObj.serialize(); 

    } 

    restore(){ 

     this.dashboardObj.panels = this.restoreModel; 

    } 

 

Refer the sample link. In this sample, save the panel settings and remove the panel and then click the restore button. 

 

https://stackblitz.com/edit/react-xhvd91-vswh64?file=index.js 

 

Query 2- How do I create a panel dynamically. 

 

We have add the panel dynamically through addPanel method of DashboardLayout component. In our sample browser site, we have add the panel using AddPanel method. Refer the below link. 

 

https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/dynamic 

 

Refer the below code snippet. 

 

   btnClick() { 

        let proxy = this; 

        let panel = [{ 

                'id': this.count.toString() + '_layout', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, 

                content: this.lineTemplate 

            }]; 

        proxy.dashboardObj.addPanel(panel[0]); 

        this.count = this.count + 1; 

    } 

 

However, we have facing some issue when restore the newly added panel in DashboardLayout component. Could you please confirm whether the following is your reported problem occurring case?. 

 

Are you want to dynamically add the panel and then restore the panel position after deleting it? 

 

Based on your update, we will further validate with this case to find the cause of your reported problem in Dashboard Layout and to provide you the prompt solution. 

 

Refer the below link to know more about the DashboardLayout component. 

 

UG documentation- https://ej2.syncfusion.com/react/documentation/dashboard-layout/getting-started/ 

 

Demo link- https://ej2.syncfusion.com/react/demos/#/material/dashboard-layout/default/ 

 

API reference- https://ej2.syncfusion.com/react/documentation/api/dashboard-layout/#addpanel 

 

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

 

Regards,  

Sowmiya.P