Styling the AutoComplete Drop Down

[Thomas]

With the RadDropDownList, I can style the drop down list using VisualListItemFormat, remove the sizing handles using DropDownSizingMode, etc.

How do I style the drop down for the autocomplete box? I've styled ItemLists in the actual theme files I have as well, but those themes seem to only apply to the parent control (IE DropDownList or AutoCompleteBox) not the drop down itself.

[Dess | Tech Support Engineer, Principal]

Hello Thomas,

Thank you for writing.

You can customize the RadAutoCompleteBox's drop down by using the RadAutoCompleteBoxListElement.VisualItemFormatting event. Additionally, you can change the drop down sizing mode via the RadAutoCompleteBoxElement.AutoCompleteDropDown.SizingMode property:

private void Form1_Load(object sender, EventArgs e)
{
    this.customersTableAdapter.Fill(this.nwindDataSet.Customers);

    RadAutoCompleteBoxElement tbElement = this.radAutoCompleteBox1.TextBoxElement as RadAutoCompleteBoxElement;
    if (tbElement != null)
    {
        RadTextBoxAutoCompleteDropDown dd = tbElement.AutoCompleteDropDown as RadTextBoxAutoCompleteDropDown;
        if (dd != null)
        {
            dd.SizingMode = SizingMode.UpDownAndRightBottom;
        }
    }

    RadAutoCompleteBoxListElement le = this.radAutoCompleteBox1.ListElement as RadAutoCompleteBoxListElement;
    if (le != null)
    {
        le.VisualItemFormatting += le_VisualItemFormatting;
    }
}

private void le_VisualItemFormatting(object sender, VisualItemFormattingEventArgs args)
{
    if (args.VisualItem.Selected)
    {
        args.VisualItem.NumberOfColors = 1;
        args.VisualItem.BackColor = Color.Yellow;
        args.VisualItem.BorderColor = Color.Blue;
    }
    else
    {
        args.VisualItem.ResetValue(LightVisualElement.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local);
        args.VisualItem.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        args.VisualItem.ResetValue(LightVisualElement.BorderColorProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

 

 

[Thomas]

Desislava,

   Thanks for responding. Where in the documentation does it talk about any of this? And why doesn't the theme manager allow me to customize this?

   Is Telerik still developing for WinForms or is it kind of a dead project? If it isn't a dead project, might I suggest making this a little more intuitive? I don't think anyone without source code access would be able to figure that out. Unless I'm somehow missing some gigantic portion of the Telerik documentation.

Tom

[Dess | Tech Support Engineer, Principal]

Hello Thomas,

Thank you for writing back.

The RadAutoCompleteBoxListElement is descendant of the RadListElement. Therefore, you can use its VisualItemFormatting event to customize the popup items. You can find similar example in our DropDownList >> Customizing Items help article. You can customize the theme via the Visual Style Builder as well. For this purpose you need to change the style of the RadListVisualItem in the RadListControl >> RadListElement's tree. We try to reuse different elements (as it is the case with the RadAutoCompleteBox and the RadListElement) and for this reason the RadListElement is not directly added as a child in the RadAutoCompleteBox.

As to your other question, Telerik UI for WinForms is not a dead project and it is still actively being worked on. You can track the new features and fixes we introduce with each release in our Release History. Your feedback and suggestion are greatly appreciated. We will consider it with the future improvement in the online documentation. 

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

Regards,
Desislava
Telerik

 

 

[Thomas]

I have Desislava, I have modified the RadListElement previously and this does not apply the theme changes to the AutoComplete Drop down. See the sample project uploaded here: http://tomsfreelance.com/Telerik/RadDropDownTheme.zip

[Dess | Tech Support Engineer, Principal]

Hello Thomas,

Thank you for writing back.

It seems that in the provided custom theme you have modified the font for the RadListControl, not the RadListElement or its RadListVisualItems in it. Please refer to the attached screenshots. I have prepared a sample video (drag and drop over the browser to play), demonstrating how to customize the Windows7 theme for example and change the background color for the items in the RadListElement.

I hope this information helps. If you have any additional questions, please let me know.
 
Regards,
Desislava
Telerik

 

 

[hosein]

Dear Desislava,

Is it possible to change direction of autocompletebox? I mean set rightToLeft =yes for both TokenizedTextBlockElement  and position of TextBoxViewElement, I mean I want to start from topRight point of the autocompleteBox and write an english or persian name, if name was in the list, I can select it but after this,I want to selectionlength==0 and selectionStart be on the left side of the last block,not Right!

problem 1:using arabic character, If I select completionMode=suggestAppend, the selectiontext is in wrong place.

problem 2:after complete a text as a block, new text placed in right side of it, I want to be on left side.

Please help me to customize this control as I said above.

Please see the attachment.

[Dess | Tech Support Engineer, Principal]

Hello Hosein,

Thank you for writing.
 
The RadAutoCompleteBox control internally uses the RadTextBoxControl, which does not support right to left yet. We do have a feature request for this. Make sure you cast your vote for it by clicking the like button: http://feedback.telerik.com/Project/154/Feedback/Details/111258

I hope this information helps. Should you have further questions I would be glad to help.

 

Regards,
Dess
Telerik