Pass Panel ID in Custom Close Icon Click Event

[Ketan Patel]

Hi Team I want to pass Panel ID to remove panel on clicking close icon. Please refer to below code for refrence.

I am not able  to retrieve panel id through #panel. Also, instead of layout_0 If I want to add my own panel id within below code how can add Id? Ex.  <e-panel [row]="0" [col]="0" id="oe-layout_1">

<ejs-dashboardlayout [columns]="3" [mediaQuery]="mediaQuery" #defaultLayout [cellSpacing]="[20,20]"

    [allowResizing]="isEditModeOn" [allowDragging]="isEditModeOn">

    <e-panels>

      <e-panel [row]="0" [col]="0" #panel>

        <ng-template #content>

          <oe-card [border]="true">

            <h2 class="card-title d-flex justify-content-between align-items-center fw-bold">

              {{ 'Gauge' }}

              <div class="d-flex align-items-center">

                <i class="icon-hide-outline card-icon" (click)="onHideClick(panel)"></i>

              </div>

            </h2>

            <oe-gauge-chart [value]="65" [config]="gaugeConfig" [ranges]="gaugeRanges">

            </oe-gauge-chart>

          </oe-card>

        </ng-template>

      </e-panel>

<e-panels>

</ejs-dashboardlayout>

  onHideClick(event) {

    console.log("Hide",event);

    this.dashboard.removePanel('layout_0');

  }

[Ketan Patel]

Hi Team, I am able to resolve this issue. Please see below code as reference:

<e-panel [row]="c.row ?? getRowNumber(i)" [col]=" c.col ?? getColNumber(i)" [id]="i.toString()" >

        <ng-template #content>

          <oe-card [border]="true">

            <h2 class="card-title d-flex justify-content-between align-items-center fw-bold">

              {{ c.name }}

              <div class="d-flex align-items-center">

                <i class="icon-hide-outline card-icon" (click)="onHideClick(i.toString())"></i>

              </div>

            </h2>

            <oe-accumulation-chart [oechart]="c.data" [oeChartViewConfig]="oeChartViewConfig">

            </oe-accumulation-chart>

          </oe-card>

        </ng-template>

      </e-panel>

[LeoLavanya Dhanaraj]

Hi Ketan,

Greetings from Syncfusion support.

From your shared details, we understand that you want to get the panel id from the Dashboard Layout component. Based on your requirement, we have prepared an Angular TreeView component in latest version with alternate solution. Here, we have got the panel Id using button click. Check the below code snippets for your reference.

[App.component.ts]

public onHideClick() {

  var IdValue = event.target.closest('.e-panel').id;

  console.log(IdValue);

  var dashboardObj = document

    .getElementById('default_dashboard')

    .ej2_instances[0].removePanel(IdValue);

  dashboardObj.removePanel(IdValue);

}

 

[App.component.html]

<ejs-dashboardlayout id="default_dashboard" ... >

    <e-panels>

        <e-panel [sizeX]="3" [sizeY]="2" [row]="0" [col]="0" id="layout1">

            ...

            <ng-template #content>

            <button (click)="onHideClick(event)">Remove panel</button>

            </ng-template>

        </e-panel>

        ...

    </e-panels>

</ejs-dashboardlayout>

Sample : https://stackblitz.com/edit/angular-beayvx?file=app.component.html

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj