Custom sorter in CheckedDropDownList

[Sandor]

Hello,

I would like to implement a custom behavior for the RadCheckedDropDownList control, where the checked items are always displayed sorted to the top of the list. Due to the large number of items, we want to make the control more transparent and manageable this way. However, no matter how I try, it seems that the EditableAreaElement and the ListElement are not staying in sync. Phantom (not typed) items constantly appear in the EditableAreaElement, or items I entered as text and are visible as tokens are missing from the CheckedItems. I’m attaching a sample code showing how I’ve tried to approach this. I would appreciate any help or suggestions on what alternative direction I should take to solve this.

Gif: While the popup is open, I start typing 'igator' (with 'Alligator' being matched in Contains SuggestMode), and it auto-completes to 'Alligatorg'. Pressed, but missing "i", and invalid token...

Thank you for your help.

[Dinko | Tech Support Engineer]

Hi Sandor,

Thank you for the provided project.

If I understand your approach correctly, you want the items inside the drop-down part to be alphabetically ordered. When an item is checked, it will be moved to the top and also ordered by its name. 

What I can suggest here is to use the RadCheckedDropDownList in bound mode. This means to create a data item object. Create a collection of that object and set it as a source to the DataSource property. Then we will modify only the bound collection of the control. The main struggle here is to sync the selection with the custom code that modifies the collection.

I have a sample project that demonstrates how you can extend the control. What the project demonstrates:

• The items are ordered by name
• The checked items will be placed at the top of the list.
• The CheckAll option is enabled. The CheckAll check box appears first, and the rest of the items are moved to the left to simulate a hierarchy.
• In the dropdown part of the control, I have inserted a TextBox that can be used to filter the dropdown items.
• This checkbox will contains first the checked items, no matter if the match the search criteria.

I want to point out that this project contains an extended version of our control. This is achieved using custom code. It may not work in all scenarios. You can modify the custom code, use only part of it, or extend it per your requirements.

Regards,
Dinko | Tech Support Engineer
Progress Telerik

[Sandor]

It's not exactly about that, because in the sample code the direct typing – item selection, tokenization – is no longer available. hat we need is the full functionality of the RadCheckedDropDownList, with the addition that the checked items are always sorted to the top. Based on the sample code, I will try to move forward by populating the control through the DataSource.

In our concept, there is no need for an additional search box.

Thank you.

[Dinko | Tech Support Engineer]

You can probably strip down the project and only use the part that moves the checked items to the top. I hope that my project will help you implement your requirement.

[Sandor]

If I try to simplify the sample code to the point where the default AutoCompleteEditableAreaElement becomes editable again, I always get a System.InvalidOperationException: 'Collection was modified; enumeration operation may not execute.' exception.

[Dinko | Tech Support Engineer]

The exception is raised because the ItemChecked event is raised when removing an item from the editor area. The internal code is unchecking the item which triggers the ItemChecked event with the custom logic. The custom logic is re-arranging the datasource while the Items collection is iterated internally. 

For your convenience, I updated your project and moved only the logic that places the checked items at the top and handles this exception by subscribing to the formatting event and raising a flag to delay the custom logic.

As I mentioned, the custom syncornization is a little bit tricky.

[Sandor]

Thank you very much!  With your guidance, I was able to achieve the desired functionality!