Adding close icon to Panel Item

[IT Solutions]

Dear support.

I have been trying to find a way to add a close icon to the Dashboard Panel header.

I want to use the built in icons but have not found any examples.

Also the close icon should have the same behavior

Can you please provide me an example on how to do this.

Best regards

Geirr

[Keerthana Rajendran]

Hi Gierr, 

Thanks for contacting Syncfusion support.  

We checked your requirement to add close icon to the Dashboard Layout panel item. You can achieve this by rendering required icon as HTML for panel.  

<ejs-dashboardlayout 

        ref="DashbordInstance" 

        :columns="5" 

        id="defaultLayout" 

        :allowResizing="true" 

        :cellSpacing="spacing"> 

        <div 

          id="one" 

          class="e-panel" 

          data-row="0" 

          data-col="0" 

          data-sizeX="1" 

          data-sizeY="1"> 

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

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

            <div class="text-align"> 

              <div>0</div> 

            </div> 

          </div> 

        </div> 

In the below demo link, we have rendered close icons for panels and handled remove panel action through this icon click.  

https://ej2.syncfusion.com/vue/demos/#/bootstrap5/dashboard-layout/default.html 

Sample: https://codesandbox.io/s/vue-dashboard-closeicon-forked-f5z6x 

Refer to the following UG for getting started with Dashboard Layout component in Vue. 

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

Please get back to us if you need any further assistance. 

Regards, 

Keerthana R.