I want to use a WebDropDown with checkbox multiselection. I have an underlying string array of data that needs to match the ticked checkboxes.
There are a few issues I've encountered:
The dropdown code itself is simply:
<ig:WebDropDown ID="MyDropDown" EnableMultipleSelection="true" MultipleSelectionType="Checkbox" runat="server" Width="200px" />
In various places, I need to updated the selection from the data source. The JS to do that is:
if (dataSource != undefined) { var ddItems = $IG.WebDropDown.find("cph_mainpage_MyDropDown").get_items(); for (var i = 0; i < ddItems.getLength(); i++) { var ddItem = ddItems.getItem(i); if (dataSource.includes(ddItem.get_text())) ddItem.select(); else ddItem.unselect(); }}
I've also tried calling activate() and inactivate() on the items, and calling invalidateCache() on the dropdown.
I'm hoping that for issue 2, there's simply some "allow selecting multiple items in one go" property I need to set somewhere, and for 3, i can somehow force the drop-down to refresh its state from the items.
Hello Sören,
I’m glad that you found my suggestions helpful and managed to resolve your issue.
Thank you for using Infragistics!
Regards, Ivan Kitanov
Hello Ivan,
yup, that works great. Thanks.
Sören
I just checked it out and you are correct, what I can suggest you is accessing the selectedItems() collection and getting the text value of each selected item. After that, a variable for the text portion of the WebDropDown needs to be created, in order to pass the values of the of the selected items with a specific separator. The code should look similar to this:
function showItems()
{
var dd = $find("WebDropDown1");
dd.__unselectAllItems();
dd.get_items().getItem(0).select();
dd.get_items().getItem(1).select();
dd.get_items().getItem(2).select();
var text = "";
for (var i = 0; i < dd.get_selectedItems().length; i++)
if (i == 0) text = text + dd.get_selectedItems()[i].get_text();
else text = text + "," + dd.get_selectedItems()[i].get_text();
}
dd.set_currentValue(text, true);
Please note that calling the join() method would return a string of [object Object],[object Object] instead of the actual text of the selected items such as “A,B”. This is the reason I am using the get_text() method with the loop.
Please let me know if you have any questions.
it seems that only works if the click is initiated from ASP.NET, rather than JS.
If I call your showItems() from the Web Inspector, the text gets cleared, not updated.
Regards
For the last issue you mentioned with the presets on my side everything works as expected, the showItems() function in my sample does exactly this. First the selection is cleared with __unselectAllItems(), after that the text portion value of the WebDropDown is set to empty string and then the items for the preset are selected. Each selected item is added to the text portion of the WebDropDown and is separated by the default separator.
To confirm this, run the sample I sent in my previous response and select any items of the WebDropDown. After that press the "Select The First 3 Items" button. After the click event is handled, the WebDropDown would have had its first 3 items selected and the text portion would show – “Item 1, Item 2, Item 3”.