Forums Home / Wijmo / General Discussion
Posted by: paulf on 14 September 2017, 11:10 am EST
paulf
Posted 14 September 2017, 11:10 am EST
Really liking the wijmo 5 control library so far.
However, I have a requirement to select multiple items from a combo box.
Is it possible to set up the combo box control to support multiple selections?
Ideally I would like to see a check box to the left of each item and a comma separated list of selected items to display as text in the combo box.
Thanks
bernardo
Posted 14 September 2017, 11:11 am EST
Glad you are liking Wijmo 5!
The control you describe sounds interesting. I will see if I can create a sample showing how to do this with a ComboBox or with a DropDown.
Thanks for the suggestion/request.
dpaquette
Posted 14 September 2017, 11:11 am EST
Any update on this? A multi-select combobox would be nice to have
ashishjindal
Posted 14 September 2017, 11:11 am EST
Hello All,
ListBox control now supports multiple selection. You can check the following demo implementing the same:
http://demos.componentone.com/wijmo/5/Angular/Explorer/Explorer/#/input/listbox
Regards
john786
Posted 14 September 2017, 11:11 am EST
it would be nice if you could provide source code for the link you sent,on the different demos you have created
ashishjindal
Posted 14 September 2017, 11:11 am EST
Hello John,
You can find the source code in the downloaded package at the following path: \C1Wijmo-Eval_5.20151.51\Samples\JS\Angular\Explorer\Explorer\
Regards
kellerapps
Posted 14 September 2017, 11:11 am EST
That’s useful but one must scroll to see what’s selected and there’s no feedback on keyboard input. See:
http://demos.telerik.com/kendo-ui/multiselect/index
manpreet-kaur
Posted 14 September 2017, 11:11 am EST
Hello,
Thank you for the feedback. We have forwarded your concerns to the development team for further review. We would let you know as soon as we get any information in this regard.
Thanks,
Manpreet Kaur
manpreet-kaur
Posted 14 September 2017, 11:11 am EST
Hello,
There is a multiselect control and is working properly in build 5.20153.102. You can refer to the following demo sample which depicts the same: http://demos.componentone.com/wijmo/5/Angular/Explorer/Explorer/#/input/multiselect.
You can download the same from the following link: http://wijmo.com/products/wijmo-5/.
Hope it helps.
Thanks,
Manpreet Kaur
kellerapps
Posted 14 September 2017, 11:11 am EST
That’s pretty bad compared to:
http://demos.telerik.com/jsp-ui/multiselect/index
which has autocomplete & shows the selection instead of “n selected”.
manpreet-kaur
Posted 14 September 2017, 11:11 am EST
Hello,
As mentioned in the following demo sample: http://demos.componentone.com/wijmo/5/Angular/Explorer/Explorer/#/input/multiselect, the MultiSelect control enables the AutoComplete feature at the drop down list. As soon as you set focus on any of the value in the dropdown list and start typing it enables the autcomplete functionality in the drop down list.
Further, the control header is fully customizable. By default, it shows up to two items selected and the item count after that. You can change the maximum number of items to display. You can set the “maxHeaderItems” property which gets or sets the maximum number of items to display on the control header.
If no items are selected, the header displays the text specified by the placeholder property.
If the number of selected items is smaller than or equal to the value of the maxHeaderItems property, the selected items are shown in the header.
If the number of selected items is greater than maxHeaderItems, the header displays the selected item count instead.
Hope it helps. Please let us know in case you have any queries further.
Thanks,
Manpreet Kaur
kellerapps
Posted 14 September 2017, 11:11 am EST
AutoComplete seems to match the first letter only.
If multiple items are selected & the list is very long, it is hard to edit or clear the items – in kendoui & others, the combobox contains each selected item as a tile so it is easy to delete them.
In kendoui & others, the combobox’s size expands to fit multiple items.
manpreet-kaur
Posted 14 September 2017, 11:11 am EST
Hello,
Thank you for sharing your observations with us. We have forwarded your concerns to the development team. We will let you know as soon as we get any information in this regard.
Thanks,
Manpreet Kaur
shaleen76
Posted 14 September 2017, 11:11 am EST
Hi,
In wijimo multi-select list, can you provide me an example achieving the following task.
When user selects atleast item from the multi-select list the button should be enabled (Angular). I am not able to get this working out, I am working for an IT company currently.
My sample code that I used is:
self.budgetGroup = ;
self.bgSelectionChanged = function(s, e) {
//1. get the selected item. var items = s.checkedItems; if(items != null && items != undefined) { for (var i = 0; i < self.budgetGroup.length; i++) { if(items.bgId == self.budgetGroup[i].bgId) { // pop the element console.log('removed item'); self.budgetGroup.splice(i, 1); } } if(items.selected == false) { console.log('pushed item'); self.budgetGroup.push(items); } } self.count = self.budgetGroup.length; };
<div class=“col-lg-9”>
<wj-list-box
style=“height:275px; width:100%”
initialized=“initialize()”
items-source=“addEditBudgetGroupRowCtrl.bgDataProvider”
selected-item=“addEditBudgetGroupRowCtrl.selectedBG”
display-member-path=“label”
selected-value-path = “bgRoleId”
checked-member-path=“selected”
selected-items-changed=“addEditBudgetGroupRowCtrl.bgSelectionChanged(s, e)”>
</wj-list-box>
</div>
shaleen76
Posted 14 September 2017, 11:11 am EST
Hi,
In wijimo multi-select list, can you provide me an example achieving the following task.
When user selects atleast item from the multi-select list the button should be enabled (Angular). I am not able to get this working out, I am working for an IT company currently.
My sample code that I used is:
self.budgetGroup = ;
self.bgSelectionChanged = function(s, e) {
//1. get the selected item.
var items = s.checkedItems;
if(items != null && items != undefined) {
for (var i = 0; i < self.budgetGroup.length; i++) {
if(items.bgId == self.budgetGroup.bgId) {
// pop the element
console.log(‘removed item’);
self.budgetGroup.splice(i, 1);
}
}
if(items.selected == false) {
console.log(‘pushed item’);
self.budgetGroup.push(items);
}
}
self.count = self.budgetGroup.length;
};
<div class=”col-lg-9″>
<wj-list-box
style=”height:275px; width:100%”
initialized=”initialize()”
items-source=”addEditBudgetGroupRowCtrl.bgDataProvider”
selected-item=”addEditBudgetGroupRowCtrl.selectedBG”
display-member-path=”label”
selected-value-path = “bgRoleId”
checked-member-path=”selected”
selected-items-changed=”addEditBudgetGroupRowCtrl.bgSelectionChanged(s, e)”>
</wj-list-box>
</div>
manish-gupta1
Posted 14 September 2017, 11:11 am EST
Hi Shaleen,
This thread has been answered at following forum link :
http://wijmo.com/topic/editing-grid-without-changing-local-data-send-to-server-first/page/2/#post-78407
Thanks,
Manish Kumar Gupta
byunru
Posted 14 September 2017, 11:11 am EST
suggest combo-box multiselect support range selection (shift+click)
manish-gupta1
Posted 14 September 2017, 11:11 am EST
Hi,
You will need to handle mouse down and click event for dropdown for range selection using shift+click inside MultiSelect’s isDroppedDownChanged event.
Mouse down event is used for getting previous selected index. And on mouse click event get new selected index and check if shift key is pressed or not. Here, you can add items in checkedItems list for select multi item in MultiSelect.
For reference, please see the attached sample that implements the same.
*Please install required package before running the sample using npm install.
Hope this helps.
Thanks,
Manish Kumar Gupta
2017/02/MultiSelectRangeSelection.zip
byunru
Posted 14 September 2017, 11:11 am EST
Hi Manish,
Thanks for providing this sample code, how about listbox? would it be good support range select for dropdown and listbox Out of Box?
John
manish-gupta1
Posted 14 September 2017, 11:11 am EST
Hi,
You can use the previous implementation with ListBox using its hostElement instead of dropdown. You will not need to handle isDroppedDownChanged event .
Please remember, the multi selection range does not store in selectedItem property since this conatins only one item. You will need to access checkedItems property for getting/setting selected item.
Thanks ,
Manish Kumar Gupta
waheedahmed.hyder
Posted 26 October 2018, 5:49 am EST
Hi Manish,
for multi select we are not able select by default please find the demo
https://stackblitz.com/edit/angular-d4fove?file=app%2Fapp.component.html
