Second input box in popup for filtering data based on column

[Deepak Jain]

Dear Team,

I am using Combobox in my Angular 8 application.

I am fetching data online through my custom coding which I get during opening of combobox popup , filtering and scrolling (based on search string). and then set the data to returned array of objects.

Now I have three columns and I want to send separate request for column wise too.

To achieve this I want to add another input box in header and send my custom online requests at keydown event and rebind the data in popup.

Below is the screenshot of how I want to put my second input box.

Can you please check how can I achieve this ?

[Sevvandhi Nagulan]

Hi Deepak, 

Greetings from Syncfusion support. 

We checked the reported requirement. We suggest you to bind the input event to input element and refresh the data to the component by using the below code. 

    onOpen(args) { 

        args.popup.element.querySelector("#input").addEventListener("click", e => { 

          this.inputEle = document.getElementById("input"); 

          this.inputEle && this.inputEle.focus(); 

        }); 

      } 

 

      onClose(e) { 

        e.cancel = true; 

      } 

      onInput(e) { 

        this.data = new DataManager({ 

          url: 

            "https://ej2services.syncfusion.com/production/web-services/api/Employees", 

          adaptor: new WebApiAdaptor(), 

          crossDomain: true 

        }); 

      } 

Please find the sample below, 

Sample link: https://stackblitz.com/edit/angular-x3c4sa-66xxs8?file=app.component.ts 

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

Regards, 

Sevvandhi N 

[Deepak Jain]

Hello Team,

In the above sample, popup doesn't close.

I need the combobox to behave as default behaviour,

1) popup shouldn't close when searching through header input box,

2) popup should close when item is selected either by mouse click or enter

3) popup should close on escape

4) popup should close on enter

5) popup should close when clicked outside of the combobox

6) all the default features as it is

[Sevvandhi Nagulan]

Hi Deepak, 

Thanks for the update. 

With the help of Boolean variable, we prevented the popup from closing when entering value in input element. All other default features will work as expected. Please find the modified sample below, 

Sample link: https://stackblitz.com/edit/angular-x3c4sa-rv6vop?file=app.component.ts 

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

Regards, 

Sevvandhi N 

[Deepak Jain]

Hi Sevvandhi,

Thanks for your update. There is some bug in your provided code, please follow the step to reproduce.

1. Click on caret Icon

2. Select any record

3. Click anywhere on the white space of the document to fire blur event

4. Click on caret Icon, a popup will not open

[Deepak Jain]

Hi Team,

Please take this on priority, its very urgent for me waiting for the reply

[Sevvandhi Nagulan]

Hi Deepak, 

We resolved the reported issue by removing the beforePopupOpen code used in blur event in the provided sample. Please find the modified sample below, 

Sample link: https://stackblitz.com/edit/angular-x3c4sa-xaetfm?file=app.component.ts 

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

Regards, 

Sevvandhi N 

[Deepak Jain]

Hello Team,

Also there is one more issue. Follow below steps :

1) Open popup through dropdown icon

2) Click on the new input box on header

3) Now if we click outside, popup doesn't close without selecting anything

Can you please check the issue ?

[Sevvandhi Nagulan]

Hi Deepak, 

We closed the popup using hidePopup public method in the input blur event. Please refer the below code, 

[app.component.html]  

<input id="input" type="text" (click)='onClick($event)' (blur)='onInputBlur($event)' (input)="onInput($event)" /> 

[app.component.ts] 

  onInputBlur(e) { 

    this.shouldClose = false; 

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

    this.remoteObj.hidePopup(); 

  } 

Please find the sample below, 

Sample link: https://stackblitz.com/edit/angular-x3c4sa-4ozxw6?file=app.component.ts 

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

Regards, 

Sevvandhi N