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,
For your first issue, I have tested it out on version 21.1. and version 20.2 and there was no issue with opening the WebDropDown. Regarding it I have 2 questions:
Which version of Infragistics Controls are you using?
How are you assigning the data source for the WebDropDown and how big is this data source? If the data is enormous, it might cause the control to load slowly.
To overcome this there are a few ways of improving performance:
Disable ASP.NET ViewState - EnableViewState=false.
Make sure AutoFiltering is not set to "Client". not sure which version you are using, but if you are using a more recent one, items objects will be lazy-loaded, in that case, improving performance a lot.
Enable load on demand, so only a certain number of items would be loaded in the control initially.
For your second issue, as you predicted there is a property called “EnableClosingDropDownOnSelect” simply setting it to false would allow you to select multiple items, without closing the WebDropDown.
As for the last issue, I have created a small sample application, where I modify the selected items of the WebDropDown inside a button click event, where the selected items are checked inside the dropdown list and are also present in the text portion of the WebDropDown, so this again may be related to using an older version.
Please test it on your side and let me know if this is an accurate demonstration of what you are trying to achieve. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce.
Looking forward to hearing from you.
Regards, Ivan Kitanov
MultiselectWebDropDown.zip
Hello Ivan,
thanks for your quick response!
Ivan Kitanov said:
Oh, I should've mentioned that. This was with 20.1.
I upgraded to 21.1, and that issue seems to be gone, so never mind. :-)
Ivan Kitanov said:How are you assigning the data source for the WebDropDown and how big is this data source? If the data is enormous, it might cause the control to load slowly.
It's an array of strings (originally from a database query), but there are only about 30 items, so I don't think that was the reason. The items get added as follows:
foreach (var item in data)
{
MyDropDown.Items.Add(new Infragistics.Web.UI.ListControls.DropDownItem(item));
}
But, in any case, I can no longer reproduce that behavior in 21.1.
Ivan Kitanov said:For your second issue, as you predicted there is a property called “EnableClosingDropDownOnSelect” simply setting it to false would allow you to select multiple items, without closing the WebDropDown.
Yes! Perfect.
Please test it on your side and let me know if this is an accurate demonstration of what you are trying to achieve.
Yes and no. For the case where I just want to clear the selection, that works.
However, this web site has various presets of selections stored in the user database. There's a dropdown where a user can select a predefined preset. If I do that, the checkboxes get ticked, but the "text field" portion of the dropdown is now always empty (which seems to be what your code does).
So, let's say the drop-down currently has A and B ticked. The text field will say "A,B". Now the user selects a different presets, which will programmatically change the actual ticked checkboxes to "C,D". With your code, the text field will now just be an empty string; it should be "C,D".
What I was hoping for is a way to set the text based on the selection. I could presumably do this manually with a string.Join() in JS, but I'm guessing your control already has some internal method like that that does this?
Thanks,
Sören