Auto-close overlay panel before opening other overlay panel

[aniket.agrawal]

Hi Folks,

I am using three primeng2 Overlay panel in a single page. How to close already opened overlay before opening the other?

Code: Select all

  <div class="col-sm-4">
                            <a class="fa fa-reorder" id="playlistPopover" (click)="op1.show($event, actualTarget)">&nbsp;Playlist</a>
                        </div>
                        <div class="col-sm-4">
                            <a class="fa fa-share-alt" id="expiryPopover" (click)="op2.show($event, actualTarget)">&nbsp;Expiry</a>
                        </div>
                        <div class="col-sm-4">
                            <a class="fa fa-ellipsis-h" id="destPopover" (click)="op3.show($event, actualTarget)">&nbsp;More</a>
</div>

Regards,
Aniket

[cagatay.civici]

We'll check and get back to you.

[aniket.agrawal]

Thanks @optimus.prime. I am waiting for your input.

In the official demo page (http://www.primefaces.org/primeng/#/overlaypanel), opened-overlay is closing automatically when other search icon is clicked in the grid.

I couldn't find any code for auto-close the existing one.

I am waiting for your input.

Regards,
Aniket

[cagatay.civici]

Are your overlay panels have dismissable enabled or disabled?

dismissable enables to hide the overlay when outside is clicked, it is true by default.

[DarthMaul]

It is about the datatable integration inside the overlay panel of datatable.There is an ngIf for the selected car so when the selected button switched its automatically switching the panel.I think you should use it a context like that.

Code: Select all

<p-dataTable [value]="cars2">
        <p-column style="width:10%;text-align:center" header="Logo">
            <template #car="rowData">
                <button type="button" pButton (click)="selectCar($event,car,op3);" icon="fa-search"></button>
            </template>
        </p-column>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="brand" header="Brand"></p-column>
        <p-column field="color" header="Color"></p-column>
    </p-dataTable>

    <p-overlayPanel #op3 [showCloseIcon]="true" [dismissable]="false">
        <img src="showcase/resources/demo/images/car/{{selectedCar.brand}}-big.gif" *ngIf="selectedCar"/>
    </p-overlayPanel>

Code: Select all

selectedCar: Car;

selectCar(event,car: Car, overlaypanel: OverlayPanel) {
        this.selectedCar = car;
        overlaypanel.show(event);
    }

[aniket.agrawal]

Hi @optimus.prime,

Here's my overlay content snippet.

Code: Select all

<p-overlayPanel #op1 [dismissable]="true">
    <!--Content 3-->
</p-overlayPanel>

<p-overlayPanel #op2 [dismissable]="true">
   <!--Content 2-->
</p-overlayPanel>

<p-overlayPanel #op3 [dismissable]="true">
    <!--Content 3-->
</p-overlayPanel>

Clicking outside works fine. But there is possibilty that user clicks on the other link to open the other overlay. Ideally, it should close the opened overlay and then open the other one.

Thanks,
Aniket

[cagatay.civici]

Got it, I've made some changes so previous panel gets closed if a new one opens, this applies do dismissable ones only.

Change is available for 1.0.0-beta along with your other request;

https://github.com/primefaces/primeng/issues/151

Thank you for your feedback.

A quick dirty way to try it until the release would be using the file below to replace your overlaypanel.js at node_modules/primeng/components/overlaypanel/overlaypanel.js

https://gist.github.com/cagataycivici/c ... eb710a423c

[aniket.agrawal]

Nice Solution!

Thanks @optimus.prime

[cagatay.civici]

Have you tried the quick js solution or will you wait until 1.0.0-beta1?