Auto-complete items with a check-box in RadCheckedDropDownList
Environment
| Product Version | Product | Author |
|---|---|---|
| 2019.2.618 | RadCheckedDropDownList for WinForms | Desislava Yordanova |
Description
RadCheckedDropDownList combines RadDropDownList and RadAutoCompleteBox in order to provide functionality to check multiple items in the drop down area and tokenize them in the text area. By design, the check boxes are shown only for the popup which is shown when the user clicks the arrow button.
A common requirement is to show check boxes in the auto-complete pop up as well.
Solution
It is necessary to create a derivative of RadListVisualItem and add a RadCheckBoxElement to its Children collection. Handle the RadCheckedAutoCompleteBoxListElement.CreatingVisualItem event to replace the default auto-complete items with the custom one. In order to keep the auto-complete pop up opened when an item is clicked in order to allow multiple items selection, it requires subscribing to the PopupClosing and MouseDown events of the RadTextBoxAutoCompleteDropDown. A sample approach is demonstrated in the following code snippet which result is illustrated in the following gif file:
private void RadForm1_Load(object sender, EventArgs e)
{
this.productsTableAdapter.Fill(this.northwindDataSet.Products);
this.radCheckedDropDownList1.DataSource = this.productsBindingSource;
this.radCheckedDropDownList1.DisplayMember = "ProductName";
this.radCheckedDropDownList1.AutoCompleteMode = AutoCompleteMode.Suggest;
RadCheckedAutoCompleteBoxListElement list = this.radCheckedDropDownList1.CheckedDropDownListElement.AutoCompleteEditableAreaElement.AutoCompleteTextBox.ListElement as RadCheckedAutoCompleteBoxListElement;
list.CreatingVisualItem += list_CreatingVisualItem;
this.radCheckedDropDownList1.CheckedDropDownListElement.AutoCompleteEditableAreaElement.AutoCompleteTextBox.AutoCompleteDropDown.PopupClosing += AutoCompleteDropDown_PopupClosing;
this.radCheckedDropDownList1.CheckedDropDownListElement.AutoCompleteEditableAreaElement.AutoCompleteTextBox.AutoCompleteDropDown.MouseDown += AutoCompleteDropDown_MouseDown;
this.radCheckedDropDownList1.CheckedDropDownListElement.AutoCompleteEditableAreaElement.AutoCompleteTextBox.AutoCompleteDropDown.PopupClosed += AutoCompleteDropDown_PopupClosed;
}
private void AutoCompleteDropDown_PopupClosed(object sender, RadPopupClosedEventArgs args)
{
RadCheckedAutoCompleteBoxListElement list = this.radCheckedDropDownList1.CheckedDropDownListElement.AutoCompleteEditableAreaElement.AutoCompleteTextBox.ListElement as RadCheckedAutoCompleteBoxListElement;
StringBuilder sb = new StringBuilder();
foreach (RadListDataItem item in list.Items)
{
if (item.Tag != null && (bool)item.Tag == true)
{
sb.AppendLine(item.Text + ";");
}
}
this.radCheckedDropDownList1.Text = sb.ToString();
}
private void AutoCompleteDropDown_MouseDown(object sender, MouseEventArgs e)
{
RadTextBoxAutoCompleteDropDown dropdown = sender as RadTextBoxAutoCompleteDropDown;
var elementUnderMouse = dropdown.ElementTree.GetElementAtPoint(e.Location);
dropdown.Tag = "down";
}
private void AutoCompleteDropDown_PopupClosing(object sender, RadPopupClosingEventArgs args)
{
RadTextBoxAutoCompleteDropDown dropdown = sender as RadTextBoxAutoCompleteDropDown;
if (dropdown.Tag != null && dropdown.Tag.ToString() == "down")
{
args.Cancel = true;
dropdown.Tag = null;
}
}
private void list_CreatingVisualItem(object sender, CreatingVisualListItemEventArgs args)
{
args.VisualItem = new CustomVisualItem();
}
public class CustomVisualItem : RadListVisualItem
{
RadCheckBoxElement checkbox = new RadCheckBoxElement();
protected override void CreateChildElements()
{
base.CreateChildElements();
this.Children.Add(checkbox);
checkbox.CheckStateChanged += checkbox_CheckStateChanged;
}
private void checkbox_CheckStateChanged(object sender, EventArgs e)
{
this.Data.Tag = checkbox.IsChecked;
}
public override void Synchronize()
{
base.Synchronize();
this.DrawText = false;
this.checkbox.Text = this.Data.Text;
}
protected override Type ThemeEffectiveType
{
get
{
return typeof(RadListVisualItem);
}
}
}
This is just a sample approach and it may not cover all possible cases. Feel free to extend this solution in a way which suits your custom requirements best.