DashboardLayout panels with option "close".

[JORGE V]

Hi, 

    I see that exist one option to resize each panel of dashboard layout. 

    It's possible to drag and drop each panel too.

    But : Is there any option to close the panel ?.

 Thanks in advance !.

 Jorge

[Keerthana Rajendran]

Hi Jorge, 

 

Thanks for contacting Syncfusion support. 

 

We checked your requirement to close the panel of Dashboard Layout. You can add a close icon for each panel and perform remove action by using removePanel method.  

 

Refer to the following code. 

 

<DashboardLayoutComponent id="default_dashboard" columns={5} ref={(scope) => { this.dashboardObj = scope; }} cellSpacing={this.cellSpacing} allowResizing={true}> 

                        <div id="one" className="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1"> 

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

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

                                <div className="text-align">0</div> 

                            </div> 

                        </div> 

             .  .  .  .  .  .  . . . 

                    </DashboardLayoutComponent> 

 

onCloseIconHandler(event) { 

    let proxy = this; 

    let panel = event.target; 

    if (panel.offsetParent) { 

      proxy.dashboardObj.removePanel(panel.offsetParent.id); 

    } 

  } 

  rendereComplete() { 

    let closeElement = document.querySelectorAll('.e-clear-icon'); 

    for (let i = 0; i < closeElement.length; i++) { 

      closeElement[i].addEventListener( 

        'click', 

        this.onCloseIconHandler.bind(this) 

      ); 

    } 

  } 

 

Sample: https://stackblitz.com/edit/react-close-panel?file=index.js 

 

Refer to the following UG and demo links for more details on Dashboard Layout component. 

 

https://ej2.syncfusion.com/react/documentation/dashboard-layout/panels/add-remove-panels/ 

 

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

 

Please get back to us if you need further assistance.  

 

Regards, 

Keerthana.