Custom AutoCompleteSuggestHelper

[Sandor]

Hi!

I need help to use our custom DropDownPopupForm (custom means that we have items in the list and after the DropDownListElement we have one RadButtonElement) for auto completion feature too.
Our custom DropDownList works as expected, when I click on the downward arrow then it shows our customized DropDownPopupForm, but when I start typing into the DropDownList then suggestions are not formatted the same way as in the previous scenario (they are not formatted at all).

I found that the AutoCompleteSuggestHelper class has the following line:
"internal bool isSuggestMode = false;//indicates this as Suggest DropDownList e.g. this is a second drop down"

So if I try to use our custom DropDownListElement, then I can not set this field from outside the package.

 

Thank you,
Sandor

 

 

[Dess | Tech Support Engineer, Principal]

Hello, Sandor,    

Note that RadDropDownList has two different drop downs. The first one is the standard popup which displays the items added in the Items collection. It is shown when you click the arrow button. The second one is displayed when you type in the editable part and the suggestions are shown. Hence, if you format the items in the standard drop down, it won't affect the autocomplete items. 

You can access the drop down for the AutoCompleteSuggestHelper by the DropDownListElement.AutoCompleteSuggest.DropDownList property. Then, you can subscribe to its VisualItemFormatting event and customize the items according to your custom requirement:

public RadForm1()
{
    InitializeComponent();
    for (int i = 0; i < 100; i++)
    {
        this.radDropDownList1.Items.Add("Item" + i);
    }

    this.radDropDownList1.AutoCompleteMode = AutoCompleteMode.Suggest;
    this.radDropDownList1.DropDownListElement.AutoCompleteSuggest.DropDownList.VisualItemFormatting += DropDownList_VisualItemFormatting;
}

private void DropDownList_VisualItemFormatting(object sender, Telerik.WinControls.UI.VisualItemFormattingEventArgs args)
{
    args.VisualItem.DrawFill = true;
    args.VisualItem.BackColor = Color.Yellow;
    args.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
}

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Sandor]

Hi Dess!

Thank you for your answer, but what if I need a button after all list's elements too in the DropDownList of AutoCompleteSuggestHelper? Just like that on the picture that I sended in my first comment.

Best Regards,
Sandor

[Dess | Tech Support Engineer, Principal]

Hello, Sandor,    

You can create a custom AutoCompleteSuggestHelper and customize its popup form in order to add a RadButton. You can find below a sample code snippet which result is illustrated in the provided screenshot:

public RadForm1()
{
    InitializeComponent();
    for (int i = 0; i < 100; i++)
    {
        this.radDropDownList1.Items.Add("Item" + i);
    }

    this.radDropDownList1.AutoCompleteMode = AutoCompleteMode.Suggest;
    this.radDropDownList1.DropDownListElement.AutoCompleteSuggest = new CustomAutoCompleteSuggestHelper(this.radDropDownList1.DropDownListElement);

    this.radDropDownList1.DropDownListElement.AutoCompleteSuggest.DropDownList.VisualItemFormatting += DropDownList_VisualItemFormatting;
}

private void DropDownList_VisualItemFormatting(object sender, Telerik.WinControls.UI.VisualItemFormattingEventArgs args)
{
    args.VisualItem.DrawFill = true;
    args.VisualItem.BackColor = Color.Yellow;
    args.VisualItem.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
}

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

    protected override RadDropDownListElement CreateDropDownElement()
    {
        return new CustomRadDropDownListElement();
    }
}

public class CustomRadDropDownListElement : RadDropDownListElement
{
    protected override RadPopupControlBase CreatePopupForm()
    {
        DropDownPopupForm form = base.CreatePopupForm() as DropDownPopupForm;
        StackLayoutElement stack = new StackLayoutElement();

        stack.Orientation = Orientation.Horizontal;

        RadButtonElement button1 = new RadButtonElement();
        button1.Text = "Button1";
        button1.StretchHorizontally = false;
        button1.StretchVertically = false;

        stack.Children.Add(button1);

        DockLayoutPanel.SetDock(button1, Telerik.WinControls.Layouts.Dock.Bottom);
        button1.StretchHorizontally = true;
        form.SizingGripDockLayout.Children.Insert(1, button1);
        return form;
    }
}

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Sandor]

Hi Dess!

That's exactly what I needed, thank you!

Best Regards,
Sandor

[Sandor]

Hello Dess!

I found a strange behavior, while using my custom DropDownList.
Repro:
1. Click on the arrow button -> The list elements appear;

2. I start typing -> The list elements still there and the AutoSuggest's list elements appear too, so I have two lists in the same moment.
(See the attached image)

[Sandor]

.....and my question is: What do I make wrong? What is the reason of this?

Thank you,
Sandor

[Dess | Tech Support Engineer, Principal]

Hello, Sandor,    

You are not doing anything wrong. The observed behavior with the second popup is by design. For reference, the MS ComboBox control has the same behavior. You can close the main popup when the auto complete gets opened.
  

public Form1()
{
    InitializeComponent();
    this.radDropDownList1.AutoCompleteMode = AutoCompleteMode.Suggest;
    this.radDropDownList1.DropDownListElement.AutoCompleteSuggest.DropDownList.PopupOpened += DropDownList_PopupOpened;
}

private void DropDownList_PopupOpened(object sender, EventArgs e)
{
    this.radDropDownList1.CloseDropDown();
}

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Sandor]

Thank you, it works!