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

Styling the AutoComplete Drop Down

7 Answers 334 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 27 Aug 2014, 08:46 PM
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.

7 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 01 Sep 2014, 01:03 PM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Thomas
Top achievements
Rank 1
answered on 03 Sep 2014, 08:21 PM
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
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 08 Sep 2014, 01:32 PM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Thomas
Top achievements
Rank 1
answered on 08 Sep 2014, 02:45 PM
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
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 11 Sep 2014, 11:11 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
hosein
Top achievements
Rank 1
answered on 18 Dec 2015, 10:28 AM

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.

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 18 Dec 2015, 01:31 PM
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

Tags
AutoCompleteBox
Asked by
Thomas
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Thomas
Top achievements
Rank 1
hosein
Top achievements
Rank 1
Share this question
or