Implementing multiple filtering with RadCheckedDropDownList

[yw]

I want to implement quick selection using the RadCheckedDropDownList control. When a user types content (assuming it's "adc" ,"1"or "app"), it should automatically filter to match the first record.

The data source is:
List<Model> datas = new List<Model>
{
new Model { Title = "Apple", Description = "abc1" },
new Model { Title = "Banana", Description = "ffd2" },
new Model { Title = "Cat", Description = "mmd3" },
new Model { Title = "Juice", Description = "nnr5" }
};

I have referred to https://docs.telerik.com/devtools/winforms/controls/dropdown-listcontrol-and-checkeddropdownlist/checkeddropdownlist/populating-with-data/data-binding, and also tried using Filter and FilterExpression, but neither can achieve multiple filtering. How can this be implemented?

[Nadya | Tech Support Engineer]

Hello,

RadCheckedDropDownList provides autocomplete functionality that can suggest or append text while the user is typing. The AutoCompleteMode property controls auto-complete behavior and can be set to None, Suggest, Append and SuggestAppend. More information is available here: AutoCompleteModes - RadCheckedDropDownList

Following the provided description, I suppose that setting the AutoCompleteMode to Suggest or SuggestAppend would be suitable for your scenario. Can you give this solution a try and let me know how it works for you? 

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[yw]

Thank you for your reply, Nadya.

I might not have expressed myself clearly. When the data source of RadCheckedDropDownList is List<Model>, with DisplayMember set to "Title" and ValueMember set to "Description", how can I achieve the following:

1. When the user types any of "ab", "1", or "ap", it can automatically match the item new Model { Title = "Apple", Description = "abc1" }. That is, the text typed by the user should be considered a successful match if it matches either the Title or the Description.
2. The matching algorithm should be string containment rather than StartsWith.

[Nadya | Tech Support Engineer]

Hello,

Thank you for clarifying your exact requirements.

In order to activate "contains" autocomplete functionality in RadAutoCompleteBoxElement, you can simply set the AutoCompleteMode property to AutoCompleteMode.Suggest. Usually, AutoCompleteMode.Append or SuggestAppend is intended to perform a "starts with" comparison. So, if you want to achieve "contains" functionality you should set it to AutoCompleteMode.Suggest.

RadCheckedDropDownList works with the item's text when performing the autocomplete function, and also later when item becomes tokenized, it uses the same text as the visual item. The value for the tokenized item should match with visual item's text in order for everything to work properly.

The possible solution that I can suggest for your case is to consider using an additional field in your data source that combines both the title and description. And later pass that field to the DisplayMember for RadCheckedDropDownList. 

this.columnsDD.DataSource = datas;
this.columnsDD.DisplayMember = "TitleDesc";
this.columnsDD.ValueMember = "Description";

private class Model
{
    public string Title { get; internal set; }
    public string Description { get; internal set; }

    public string TitleDesc
    {
        get
        {
            return $"{Title} {Description}";
        }
    }
}

The consequence of taking this action is that you will be able to see the entire text on your items. I'm not certain if this would be fine for you or not, but we don't have other suggestions at this time. 

I would like to note something else, according to your data model and pictures that you show, the items appear without description, such as "apple", "banana", etc. Then, it is normal that the user can type and search through the item's text that is visible for the user. To my opinion it would be tricky and not intuitive if the user types "abc" and matches "apple", or type "ffd2" that matches "banana", which is not even visible in the item descriptiopn. I'm not familiar with your actual situation, but I believe you have valid reasoning. I'm just sharing my opinion.

I agree that providing our users to search into the description text of items is a reasonable request, and this is why I logged a feature request on your behalf about introducing such behavior in RadCheckedDropDownList. I believe our clients can benefit from this functionality. Here is the feedback item: RadCheckedDropDownList: Provide opportunity to search/autocomplete by DescriptionText of items

I granted you Telerik Points for requesting this behavior.

I hope this information helps. If you have other questions, please let me know.

 

[yw]

Thank you for your reply. It is an effective solution, but not "perfect".
With reference to https://docs.telerik.com/devtools/winforms/controls/dropdown-listcontrol-and-checkeddropdownlist/dropdownlist/features/auto-complete, the filtering function where either Text or DescriptionText matches the entered characters has been implemented using RadDropDownList and DescriptionTextListDataItem.

 protected void InitDropDownList()
 {
     foreach (var m in this._dataSource)
     {
         DescriptionTextListDataItem descriptionItem = new DescriptionTextListDataItem();
         descriptionItem.Text = m.Name;
         descriptionItem.DescriptionText = m.PinYin;
         this.ddl.Items.Add(descriptionItem);
     }

     this.ddl.AutoCompleteMode = AutoCompleteMode.Suggest;

     this.ddl.DropDownListElement.AutoCompleteSuggest =
         new CustomAutoCompleteSuggestHelper(this.ddl.DropDownListElement);
 }
When typing "dj", it can automatically match the specified item, as shown in Figure 1.

When using the RadCheckedDropDownList control and DescriptionTextCheckedListDataItem, it displays correctly,

but when typing "dj", the drop-down list box fails to match the specified item, as shown in Figure 2.

protected void InitCheckedDropDownList()
{
foreach (var m in this._dataSource)
{
    DescriptionTextCheckedListDataItem descriptionItem = new DescriptionTextCheckedListDataItem();
    descriptionItem.Text = m.Name;
    descriptionItem.DescriptionText = m.PinYin;
    cddl.Items.Add(descriptionItem);
}
this.cddl.AutoCompleteMode = AutoCompleteMode.Suggest;

this.cddl.DropDownListElement.AutoCompleteMode = AutoCompleteMode.Suggest;
this.cddl.DropDownListElement.AutoCompleteSuggest =
    new CustomAutoCompleteSuggestHelperX2(this.cddl.DropDownListElement);
 }

public class CustomAutoCompleteSuggestHelper : AutoCompleteSuggestHelper
{
    public CustomAutoCompleteSuggestHelper(RadDropDownListElement owner)
        : base(owner)
    {
    }

    protected override void SyncItemsCore()
    {
        this.DropDownList.ListElement.Items.Clear();
        this.DropDownList.ListElement.BeginUpdate();
        foreach (DescriptionTextListDataItem item in Owner.Items)
        {
            DescriptionTextListDataItem newItem = new DescriptionTextListDataItem();
            newItem.Text = item.Text;
            newItem.DescriptionText = item.DescriptionText;
            newItem.Value = item.Value;
            newItem.TextWrap = item.TextWrap;
            newItem.Enabled = item.Enabled;
            this.DropDownList.ListElement.Items.Add(newItem);
        }

        this.DropDownList.ListElement.EndUpdate();
    }

    protected override bool DefaultFilter(RadListDataItem item)
    {
        DescriptionTextListDataItem descriptionItem = item as DescriptionTextListDataItem;

        if (descriptionItem != null)
        {
            bool matchesFilter = descriptionItem.Text.ToLower().Contains(this.Filter.ToLower()) ||
                                 descriptionItem.DescriptionText.ToLower().Contains(this.Filter.ToLower());
            return matchesFilter;
        }

        return base.DefaultFilter(item);
    }
}

public class CustomAutoCompleteSuggestHelperX2 : AutoCompleteSuggestHelper
{
    public CustomAutoCompleteSuggestHelperX2(RadDropDownListElement owner)
        : base(owner) {}

    protected override void SyncItemsCore()
    {
        this.DropDownList.ListElement.Items.Clear();
        this.DropDownList.ListElement.BeginUpdate();
        foreach (DescriptionTextCheckedListDataItem item in Owner.Items)
        {
            DescriptionTextCheckedListDataItem newItem = new DescriptionTextCheckedListDataItem();  //old: DescriptionTextListDataItem();
            newItem.Text = item.Text;
            newItem.DescriptionText = item.DescriptionText;
            newItem.Value = item.Value;
            newItem.TextWrap = item.TextWrap;
            newItem.Enabled = item.Enabled;
            this.DropDownList.ListElement.Items.Add(newItem);
        }

        this.DropDownList.ListElement.EndUpdate();
    }

    protected override bool DefaultFilter(RadListDataItem item)
    {
        DescriptionTextCheckedListDataItem descriptionItem = item as DescriptionTextCheckedListDataItem;  //old: DescriptionTextListDataItem();

        if (descriptionItem != null)
        {
            bool matchesFilter = descriptionItem.Text.ToLower().Contains(this.Filter.ToLower()) ||
                                 descriptionItem.DescriptionText.ToLower().Contains(this.Filter.ToLower());
            return matchesFilter;
        }

        return base.DefaultFilter(item);
    }
}

public class Model : INotifyPropertyChanged
{
    private int _id;
    private bool _selected;
    private string _name = String.Empty;
    private string _pinyin = string.Empty;
    public int Id
    {
        get => this._id;
        set
        {
            this._id = value;
            this.OnPropertyChanged("Id");
        }
    }

    public bool Selected
    {
        get => this._selected;
        set
        {
            this._selected = value;
            this.OnPropertyChanged("Selected");
        }
    }

    public string Name
    {
        get => this._name;
        set
        {
            this._name = value;
            this.OnPropertyChanged("Name");
        }
    }

    public string PinYin
    {
        get => this._pinyin;
        set
        {
            this._pinyin = value;
            this.OnPropertyChanged("PinYin");
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    protected virtual void OnPropertyChanged(string propName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }
}