Multi select drop down list
Date Posted | Product | Author |
---|---|---|
Q1 2013 | Telerik UI for WinForms | Tsvetan Raikov |
How To
By default, RadDropDownList does not support selecting multiple items out of the box. This article will guide to through the process of extending the functionality of RadDropDownList to support multi selection with check boxes.
As of Q3 2014 (version 2014.3.1021) Telerik UI for WinForms suite offers RadCheckedDropDownList control which combines RadDropDownList and RadAutoCompleteBox in order to provide functionality to check items in the drop down area and tokenize them in the text area. All previous functionality is preserved, such as visual formatting and data binding, which is now extended.
Solution
First, we will start by creating CustomDropDownList, which inherits from RadDropDownList. We should override the ThemeClassName in order to allow the control to use the RadDropDownList theme and the CreateDropDownListElement, where we will return an instance of a CustomEditorElement and will define the collection editor for our items at design time, so we can add our custom items:
Now, we have to create the CustomEditorElement. In the element's constructor we will first initialize the close button and add it accordingly to the sizing grip of the popup. We will also subscribe to its click, where we will close the popup. Next, we will set the SelectionMode to MultiSimple, which means that the users will be able to select item with mouse click or space button. We will also subscribe to the following events:
PopupClosing - here we will cancel the popup closure when it contains mouse so we can use it to select items
CreatingVisualItem - here replace the default visual item with a custom one
ItemDataBinding - replace the default data item with a custom one
In the CreateChildElements override, we will initialize and add the LightVisualElement which will hold the text.
Another useful override we have to add is the the one of the ShowPopup method, where prior calling the base functionality we will save the selected items and restore them after.
Finally, we will create a method that fires the OnTextChanged event, used to set the element's text accordingly:
Next, we will create a custom data item where we will just add a property to store that information about the check operation:
Finally, we will need to create a custom visual item. To do that, we will inherit from RadListVisualItem. Then, in the CreateChildElements override, we will initialize a StackLayoutElement, which will hold both the check box (RadCheckBoxElement) and the content element (a LightVisualElement). In the ToggleStateChanged event of the check box we will set the data item's Check property (which we have added in the CustomListDataItem class) and in the SynchronizeProperties override we will sync the check box and the text with its data item:
And finally we need to create our CollectionEditor, for design time support:
Here is how to put this control in action:
A complete solution in C# and VB.NET can be found here.