Custom AutoCompleteSuggestHelper in UI for WinForms

This is a migrated thread and some comments may be shown as answers.

Custom AutoCompleteSuggestHelper

8 Answers 28 Views

DropDownList

This is a migrated thread and some comments may be shown as answers.

Sandor asked on 28 Nov 2018, 02:10 PM

nodelist.png

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

8 Answers, 1 is accepted

answered on 29 Nov 2018, 07:32 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Accepted

answered on 29 Nov 2018, 02:30 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 11 Dec 2018, 08:55 AM

dropdownlistelement.png

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)

Accepted

answered on 11 Dec 2018, 11:52 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.