Styling the AutoComplete Drop Down

8 posts, 0 answers
  1. Thomas
    Thomas avatar
    7 posts
    Member since:
    Aug 2014

    Posted 27 Aug 2014 Link to this post

    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.
  2. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 01 Sep 2014 Link to this post

    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.
     
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Thomas
    Thomas avatar
    7 posts
    Member since:
    Aug 2014

    Posted 03 Sep 2014 in reply to Dess Link to this post

    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
  5. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 08 Sep 2014 Link to this post

    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.
     
  6. Thomas
    Thomas avatar
    7 posts
    Member since:
    Aug 2014

    Posted 08 Sep 2014 in reply to Dess Link to this post

    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
  7. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 11 Sep 2014 Link to this post

    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.
     
  8. hosein
    hosein avatar
    1 posts
    Member since:
    Dec 2015

    Posted 18 Dec 2015 Link to this post

    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.

  9. Dess
    Admin
    Dess avatar
    1601 posts

    Posted 18 Dec 2015 Link to this post

    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

Back to Top
UI for WinForms is Visual Studio 2017 Ready