WebDropDown selection behavior

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:

1. the first few times I click the arrow to open the dropdown, nothing happens. There's no error in the browser console either, so I'm not sure. It seems the first time the page loads, I need to click at least thrice for the dropdown to actually appear.
2. every time I check or uncheck an item, the dropdown closes. It's slightly annoying to quickly check multiple items this way.
3. I can update the selection from JS, but it only seems to affect the checkboxes. The dropdown text itself doesn't get updated.

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!

[quote user=”E49D81867DA846E3D1A1C7490AFA25AC697E0254″][/quote]

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?

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. 🙂

[quote user=”E49D81867DA846E3D1A1C7490AFA25AC697E0254″]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.[/quote]

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.

[quote user=”E49D81867DA846E3D1A1C7490AFA25AC697E0254″]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.[/quote]

Yes! Perfect.

[quote user=”E49D81867DA846E3D1A1C7490AFA25AC697E0254″][/quote]

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.

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

Hello Sören,

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”.

Please let me know if you have any questions.

Regards,
Ivan Kitanov

Hello Ivan,

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

Hello 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.

Regards,
Ivan Kitanov

Hello Ivan,

yup, that works great. Thanks.

Sören

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