Combobox having multi-column drop-down list with virtual data binding

Question

Hi Team,I am currently enhancing my current enterprise application built in Angular 2 to use cloud-platform.There is a use case where i have at least a million records to be fetched in a drop-down list.I guess Combobox having multi-column drop-down list with virtual data binding and Autocomplete kind of filter should be optimal for my scenario.Just browsing through the Syncfusion EJS2 Angular control library to get cues on implementation.Would be great if you guys could share any inputs or better still, some sort of starter snippet that we can build upon?Thanks in advance.Best Regards,KennyAttachment: MultiColumnComboBoxControl_8c16331f.zip

Karthikeyan Viswanathan · Answer

Hi Kenny, 
 
Thanks for contacting Syncfusion support. 
 
Based on your scenario, you can achieve this case by using itemTemplate property and popup’s itemCreated event for add a multiple column template to each items. 

Please refer the sample link:  https://stackblitz.com/edit/multicolumn-dropdown  

And also, we have added filtering support for multicolumn dropdown in that sample. But currently, virtual scrolling is not support while using addItem public method with itemTemplate. We are considering this case as an issue in our end. Also, the fix will be included in our upcoming patch release. 
 
Regards, 
Karthikeyan V.

Charlotte ROZAN · Answer

Hello,Is there a chance that virtual scroll with remote data exist now  ?My context is : I have to bind data to the combobox with my asp.net core 3.1 rest api (so no OData). I can't see any example of what object datasource is expected (for ej2-grid I know this is a DataResult but what about combobox ? )Plus, it will be a huge relief if you tell me that we can do filtering with remote data (http get query) and a virtual scroll to load remote data :)

Sureshkumar P · Answer

Hi Charlotte, 
 
Thanks for your update.  
 
Based on your shared information, we suspect that you want to load the data with virtual scrolling and server-side filtering. We have prepared the sample based on your requirements.  
 
Please find the sample here 
 
Front end sample : https://stackblitz.com/edit/angular-35bvmv-ipmnwc?file=app.component.ts  
 
Back end sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/backEndDDLService2003482771  
 
In this above sample we have loaded the virtual scrolling in open event. If you want to load the virtual scrolling when filter the action, then you need to load the virtual scrolling workaround in actionComplete event.  
 
Regards, 
Sureshkumar P

Charlotte ROZAN · Answer

Thank you for your samples.Hello, after some research, it seems impossible to have a valueTemplate on combobox component even if it's an extension of the dropdownlist component (this one accept valueTemplate). I try to set ValueTemplate in my view but I have a " Cannot read property 'viewContainerRef' of null" at the selection event

Sureshkumar P · Answer

Hi Charlotte, 
 
Thanks for your update. 
 
Based on your provided information, your requirement can be achieved using the valueTemplate. Since combobox is editable component, we did not provide the value template support. We suggest using the dropdownlist component. 
 
To know more about dropdownlist component please refer the documentation and online demos. 
 
Documentation link: https://ej2.syncfusion.com/angular/documentation/drop-down-list/getting-started/?no-cache=1  
 
Online demo: https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/default  
 
Regards, 
Sureshkumar P