Hi,
In the example of combo component(https://stackblitz.com/angular/mjvpnollgae) a single selection example is created with a combination of a input-group and a drop-down but the component is not responsive and has not filtering features.
Can the combo component be configured to allow only single selection?
My tests are with igniteui-angular 6.1.2
Hi, Eduardo.
The igx-combo is designed to have multiple selection with checkboxes by default. In order to have single selection you need to use igx-drop-down and input as shown in the sample, but you need to implement custom filtering if you want such. You can share more details of what you want to achieve as a scenario, why you don't need a multiple selection and we can try to find a solution with our available controls or eventually consider the idea of having single selection in the combo.
When we have designed the combo, we thought that cases when the need of a single selection combo with a lot of items will be rare (which doesn't require filtering), and we decided not to have separation of logic for single and multiple combo, which will increase complexity of the component. In other hand Google Material design guidelines suggest multiple selection as the way selection should happen.
I will wait for your feedback in order to see if we can achieve the scenario you want with the use of an igx-drop-down and some additional logic around it! Thank you for using our product!
Best regards,
Nikolay Alipiev
Software Developer
Hi Nikolay,
I am evaluating igniteui for Angular as a replacement for our currently used UI framework.
One component we need is a single-select dropdown with filtering. The dropdown will display about 600-700 items (organizational units) which is too long to scroll.
I have found this thread but unfortunately the samples mentioned do not implement what we need.
As time has passed is there something new regarding our requirements?
Regards,Michael
5 days have passed and no answer from Infragistics.
Seems they do not want to sell licenses.
Hi, Michael.
Thank you for your patience!.
Since my last answer, we have introduced igx-autocomplete as a component, which is using igx-drop-down as a source and is filtering its items. Can you check if this is what you are expecting?
I hope that the above component should be enough in your case. However, I want to share with you that in addition, we have introduced Virtual Drop Down, whose goal is to render only the visible items, in order to gain performance. Both with igx-autocomplete can be combined in cases when drop-down data is large. In your specific case having 600-700 items will not differ for the autocomplete, especially knowing that after filtering the list will be reduced. I just want to ensure you that if your data grows the performance will not change.
I will wait for your feedback. Please don't hesitate if you have more questions or need a specific demo for your case. We will be very happy to work with you for the future! Thank you!
thanks for your suggestion.
Looks good execpt for "The suggestions will show once you start typing in the text input or use the Arrow Up/Arrow Down keys." In our case the list must be shown immediately like in dropdown or combo.
Virtual Drop Down will not be needed as the number of items will not increase significantly.
I think the easiest way would still be a single select ComboComponent or a filter on DropDown.
This can be easily achieved, by adding a click handler to the input and inside manually opening the drop down. Here is a demo, which extends the first demo from the autocomplete topic, with the handler that opens the drop down. I will wait for your feedback if that scenario fits your needs.
As you can see this is an application scenario. When designing components, we always consider such scenarios as something that could be integrated into the component or is something that can be configured in the application. We think that adding a click handler, in that case, is straightforward and in some cases, it is better to do it in the application, instead of creating an additional component setting that may complicate component logic. However, if you think that this should be in the igx-autocomplete you can create a feature request (new issue) in our public repository.
Thank you for your cooperation!
Hi Michael (& Eduardo),
I have the same issue, and I think I may have a solution.
https://stackblitz.com/edit/github-cxvmpg?devtoolsheight=33&file=src/app/combo-main/combo-main.component.ts
The key to shoe-horning this component into single-select mode is to change the newSelection array in the onSelectionChange event:
public handleSelection(e) { console.log('Before ' + e.newSelection); if (e.newSelection.length > 1) { e.newSelection = e.added; } console.log('After ' + e.newSelection); }
I am still testing this approach.
In my example, I have also enhanced the list of states so that each state has a numeric key. I frequently need the key bound to my data model, yet I want to display the description.
After some testing, if this works for me I plan to wrap the igx-combo in my own component so that I can pass a parameter to control whether I want single-select or multi-select.
I agree that single-select should have been a property of the igx-combo, because it is a such a common development choice.
Walter
Michael,
I have the same need - and I am experimenting with the solution below.
I wonder if it will work for you too.
1) add onSelectionChange to the combo in your html
I understand. Whatever you decide, please log this as a feature request in our public repository. Our product owners are reviewing the feature requests and are prioritizing them. We also has an UX team that using your requirements will evaluate the different behaviors and API of the component. What you are requesting is valid scenario and I'm sure we will carefully evaluate the need for such a component.
Google with Angular and Material Design Guidelines are proposing a different philosophy for creating applications. Ignite UI for Angular are native components and using them requires different approach as opposed to our Ignite UI for JavaScript components for example. However we understand that it is important for developers to switch between technologies as fast as possible.
thanks for your help.
Just look at the existing Combo and take away the checkboxes and multiselect. That's it.If filtering results in "nothing found" the list should be empty.
But please do not spend any more time on this. The "single select combo" was just the first component we tried to replace in our app to see how it fits into our code.
We have to look more into it before we can decide if we really can or want to switch. The Ingnite UI components have a different philosophy than we are used to so we would have to change a lot in our code.
ThanksMichael
Those are things that can be achieved on an application level, and I can prepare a demo for you. I will just need some more details about your case. What you are expecting when blurring the drop down with text in the input that is not presented in the list? To clear the input and close the drop down? To leave the text, as it is (eventually select it) and don't close the drop down?
When you are in the input the arrow down will open the drop down and Esc button will close it. Do you want when you are on the first item and press Arrow Up to close the drop down?
If you still expect that to be out of the box, presented from some of our components we can proceed with logging and feature requests. Lets clear what your expectations are and if you prefer I can log the bug in our public repository. Thank you once again for the cooperation!
Software developer