display all options without filter on dropdown with value selected

Question

I have an autocomplete bound to a tree grids edit mode for the column.

I have a value selected for the autocomplete.

When the user hits the down arrow to see the drop down options I would like them to see all the options vs the filter down to the selected text.

I thought I could do this via the filter event but it does not seem to fire when the user hits the drop down.

Why is the best way to show all drop down options for this scenario without the filter?

Pon Selva Jeganathan · Answer

Hi Zachary, Thanks for contacting syncfusion forum. Query: display all options without filter on dropdown with value selected From your query, We suspect you want to show all dropdown values while editing a column. We suggest you use the dropdown component instead of using auto complete component. Please refer to the below code snippet, Refer to the code example:- App.component.html

…

App.component.ts: ……… }; this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; this.validationRules = { minLength: 0 }; this.edit = { params: { format: 'n' } }; this.numericParams = { params: { format: 'n' } }; this.taskidrules = { required: true, number: true }; this.tasknamerules = { required: true }; this.startdaterules = { date: true }; this.durationrules = { number: true, min: 0 }; this.progressrules = { number: true, min: 0 }; this.dpParams = { create: () => { let elem: HTMLInputElement = document.createElement('input'); elem.id = 'taskname'; return elem; }, read: () => { return this.dropdownObj.value; }, destroy: () => { this.dropdownObj.destroy(); }, write: (args: { rowData: Object; column: Column; element: HTMLElement; }) => { this.dropdownObj = new DropDownList({ dataSource: <{ key: string; value: any }[]>( this.treegrid.grid.dataSource ), fields: { value: 'taskName' }, value: args.rowData[args.column.field], }); this.dropdownObj.appendTo(args.element); }, }; } } Sample Link: https://stackblitz.com/edit/angular-f9jzxf-aqfvmg?file=app.component.ts If the above solution does not meet your requirement, kindly get back to us with the below requested details, Kindly share the detail explanation of your requirement. Share us a video demo or screenshot of your requirement. The provided information will be helpful to provide you response as early as possible. Regards, Pon selva

Zachary · Answer

I actually need the autocomplete feature that allows typing, so the normal dropdown will not work for this situation.

When the user edits a row, they are going to either type in the new value or use the dropdown. With the autocomplete hitting the dropdown has an undesirable behavior of showing just the value they are trying to switch from.

I've been able to change this behavior with the filtering event, but the filtering event does not fire when the user hits the dropdown to change the content of the pop up.

That's what I'm looking for here. If the user has an item selected to show all the options when they hit the dropdown instead.

Pon Selva Jeganathan · Answer

Hi Zachary,  
 
Thanks for the update. 
 
Query:  filtering event does not fire when the user hits the dropdown to change the content of the pop up. 
 
Based on your query, we suspect that you want to bind the filtering event for autocomplete component. We suggest you use filtering event as below code snippet, 
 




 
 
App.component.ts 
 write: (args: { 
        rowData: Object; 
        column: Column; 
        element: HTMLElement; 
      }) => { 
        this.autoCompleteObj = new AutoComplete({ 
          dataSource: <{ key: string; value: any }[]>( 
            this.treegrid.grid.dataSource 
          ), 
          fields: { value: 'taskName' }, 
          value: args.rowData[args.column.field], 
          filtering: (e) => { 
            alert('This is filtering event'); 
          }, 
        }); 
        this.autoCompleteObj.appendTo(args.element); 
      }, 
 
 
 
Please refer to the below sample, 
https://stackblitz.com/edit/angular-uwx6uq?file=app.component.ts 
 
Please refer to the below screenshot, 
 
  
 
Please refer to the below documentation, 
https://ej2.syncfusion.com/angular/documentation/auto-complete/how-to/filter/ 
https://ej2.syncfusion.com/documentation/auto-complete/how-to/filter/ 
 
Please refer to the below demo link, 
https://ej2.syncfusion.com/angular/demos/#/bootstrap5/auto-complete/custom-filtering 
 
Kindly get back to us for further assistance. 
 
   
Regards, 
Pon selva

Zachary · Answer

In the filter event you can change what's in the dropdown.

I would like to do something similar when the user opens the dropdown, however, the filter event does not fire when the user hits the dropdown.

Is there an event where I can update what will be in the dropdown when the user opens it so that I can show all items instead of what matches the text selected in the autocomplete.

Pon Selva Jeganathan · Answer

Hi Zachary,  
 
Thanks for the update. 
 
Query:  filtering event does not fire when the user hits the dropdown to change the content of the pop up. 
 
Based on your query, we suggest you use the focus event and showPopup method of autocomplete. The focus event is triggers when the autocomplete is focused. To show all the items in the popup, you can call the showPopup method. Please refer to the below code snippet, 
 




 
 
App.component.ts 
 write: (args: { 
        rowData: Object; 
        column: Column; 
        element: HTMLElement; 
      }) => { 
        this.autoCompleteObj = new AutoComplete({ 
          dataSource: <{ key: string; value: any }[]>( 
            this.treegrid.grid.dataSource 
          ), 
          fields: { value: 'taskName' }, 
          value: args.rowData[args.column.field], 
           focus: (args) => { 
            this.autoCompleteObj.showPopup(); 
          }, 
     filtering: (e) => { 
            alert('This is filtering event'); 
          }, 
 
        }); 
        this.autoCompleteObj.appendTo(args.element); 
      }, 
 
 
 
Please refer to the below sample, 
https://stackblitz.com/edit/angular-uwx6uq-ahhj6j?file=app.component.ts 
 
Please refer to the below API documentation, 
https://ej2.syncfusion.com/angular/documentation/api/auto-complete/#focus 
https://ej2.syncfusion.com/angular/documentation/api/auto-complete/#showpopup 
 
Kindly get back to us for further assistance. 
   
Regards, 
Pon selva

Zachary · Answer

This was the default behavior of the ComboBox, which seems to have all of the same functionality of the AutoComplete. When I switched over it worked by default.

Manivannan Padmanaban · Answer

Hi Zachary, 

Thank you for the update.  

We are happy to hear that your requirement has been achieved. 

Please get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 
Manivannan Padmanaban