Programmatically preset filterbar input in dropdownlist component

[Piotr Golabek]

Hi,

My question is: How to programmatically preset drop down list filter, so that the filter bar is initially not empty and the item list is prefiltered. In your typical scheme all the filtering is done in reaction to filtering  event, when both the contents of filter bar and  updateData method are accessible via event object. How to set filter bar contents programmatically and how to call updateData without event context?

Here is my usage context:    

I have a need of creating an editor component for a grid cell which combines functionality of masked numerical input and drop down list, allowing for selection of one of the predefined labels. Without details, when user enters a digit, the component switches to masked input view, and when user enters alpha, it switches to filtered drop down list. The alpha character, that has been entered should preset a dropdown list filter input, so that the list shows prefiltered. 

Thank you in advance for your help,

Piotr 

      

[Ponmani Murugaiyan]

Hi Piotr, 

Greetings from Syncfusion support. 

Query: How to programmatically preset drop down list filter, so that the filter bar is initially not empty and the item list is prefiltered.. 

You can preset the DropDownList component filterbar input with value in open event as like below code snippet. Here we have demonstrated with sample in which if you type any character in HTML input, then open the dropdown and ensure the typed character list will be filtered as per your requirement.  

<ejs-dropdownlist #dropdown id='country' [dataSource]='data' [fields]='fields' (filtering)='onFiltering($event)' 

    (open)='onOpen($event)' [popupHeight]='height' [allowFiltering]='true' [placeholder]='watermark'> 

</ejs-dropdownlist> 

<input id='val' type='text' > 

 

public onOpen() { 

    (this.dropdownObj as any).filterInput.value = document.getElementById("val").value; 

    (this.dropdownObj as any).searchLists(); 

} 

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

Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Piotr Golabek]

Thank your very much for your help!

Piotr 

[Ponmani Murugaiyan]

Hi Piotr, 

We are glad to hear that the provided solution meets your requirement. Please get back us if you need further assistance. 

Regards, 

Ponmani M