how to make popup for dropdown stay without disapearing even on clicling outside

[thowfik]

how to make popup for dropdown stay without disapearing even on clicling outside

Thanks in Advance 

Regards

Thowbik

[Prince Oliver]

Hi Thowbik, 

Thank you for contacting us. 

You can use the close event in the control and set the args.cancel as true to prevent the popup from closing. Kindly refer to the following code. 

[app.component.html] 

<ejs-dropdownlist id='games' #sample1 [dataSource]='sportsData' [fields]='localFields' [placeholder]='localWaterMark' (close)="onClose($event)" [popupHeight]='height'></ejs-dropdownlist> 

[app.component.ts] 

public onClose = (e) => { 

  e.cancel = true; 

} 

Example link: https://stackblitz.com/edit/angular-oasyni  

Let us know if you need any further assistance on this. 

Regards, 

Prince 

[Rocky]

Hi All, 

How-to close three dots sort, filter select ,deselect drop-down menu on popup when click outside of its region , it's closing when click agin on three dots , not closing when we click outside in sync fusion ejs grid menu .

Thanks 

[UdhayaKumar Duraisamy]

Hi Rocky,

We are validating the requirement. We will update the further details in two business days (17^th August 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Rocky,

We request you to provide more information for our clarification. Please share the below details that will be helpful for us to provide a better solution.

1) Share the issue replication procedure step by step.

2) Share the issue scenario in a video demonstration format.

3) Simple issue reproducible sample or try to reproduce the issue with our sample which was shared in our previous update.

Regards,

Udhaya Kumar D

[Shyam]

public onClose = (e) => { 

  e.cancel = true; 

} 

with this we are able to restrict the dropdown to not close. But after this I want to close at some time.
So, for example, I am opening an another popup when user clicks on the dropdown options without closing the dropdown with above code. But when user clicks button on popup then both the popup and dropdown should get closed. Also, when both dropdown and popup is in open state and user clicks outside then also both should get closed. how should we achieve this?

this.dropdownElement.hidePopup();

This is not working once we are setting -

  e.cancel = true; 

Using version - 

21.2.6

[Yohapuja Selvakumaran]

Hi thowfik,

Thank you so much for getting back to us! We’ve carefully reviewed your requirement regarding closing the popup in the DropDownList component, and we’re happy to provide a solution based on your needs.

We’ve created a sample where the popup remains open when selecting a value from the DropDownList, and only hides when clicking a button inside the popup. Kindly refer to the following code snippet to see how this can be implemented:

Code Snippet:

[app.component.ts]

 

  @ViewChild('dropdownObj') public listObj: DropDownListComponent;

  public games: { Id: string; Game: string }[] = [

    { Id: 'Game1', Game: 'American Football' },

    { Id: 'Game2', Game: 'Badminton' },

    { Id: 'Game3', Game: 'Basketball' },

    { Id: 'Game4', Game: 'Cricket' },

    { Id: 'Game5', Game: 'Football' },

    { Id: 'Game6', Game: 'Golf' },

    { Id: 'Game7', Game: 'Hockey' },

    { Id: 'Game8', Game: 'Rugby' },

    { Id: 'Game9', Game: 'Snooker' },

    { Id: 'Game10', Game: 'Tennis' },

  ];

  public fields: Object = { text: 'Game', value: 'Id' };

  public height: string = '400px';

  public watermark: string = 'Select Modules';

  public isClick: boolean = false;

 

  // Handle Apply Button Click

  public applyHandleClick(): void {

    this.isClick = true;

    (this.listObj as any).beforePopupOpen = true;

    this.listObj.hidePopup();

    (this.listObj as any).beforePopupOpen = false;

  }

 

  // On Close Event

  public onCloseHandler(args: any): void {

    if (!this.isClick) {

      args.cancel = true;

      this.isClick = false;

    }

  }

 

  // On Select Event

  public onSelect(): void {

    this.isClick = false;

  }

 

  // Global Click Handler to Close DropDownList and Popup

  public onDocumentClick(event: MouseEvent): void {

    const target = event.target as HTMLElement;

    if (!target.closest('.e-dropdownlist') && !target.closest('.e-popup')) {

      this.isClick = true;

      (this.listObj as any).beforePopupOpen = true;

      this.listObj.hidePopup();

      (this.listObj as any).beforePopupOpen = false;

    }

  }

 

 

For your convenience, we’ve also provided a runnable sample that you can check out here:

Sample: https://stackblitz.com/edit/angular-fyzthj-uysjr2?file=src%2Fapp.component.ts,src%2Fapp.component.html

We hope this helps! If you have any further questions or need additional assistance, please don’t hesitate to let us know. We’re always happy to assist you!

Regards,

Yohapuja S