How to change the look of AutoCompleteBox entries ?

8 posts, 1 answers
  1. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 23 Oct 2014 Link to this post

    Hi,

    On the page for the AutoCompleteBox (http://www.telerik.com/products/aspnet-ajax/autocomplete-box.aspx) where they talk about the Positioning, the entries have a flag and a text.
    How can we do this ?
    I did not find anything in the samples that look like it.

    More specifically I would like to be able to change the background color of the entries based on a property of the entry. (ex: France would be blue, United States would be Green,...)
  2. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 27 Oct 2014 in reply to Mickael Link to this post

    I could really use some help on this topic.
    If I missed something obvious like a tutorial link or something, just tell me.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 28 Oct 2014 Link to this post

    Hello,

    A very similar scenario with adding a flag icon next to the entry text is show in our Olympic Games sample application. Please download this application and review the Medals-By-Country.aspx. In the RadAutoCompleteBox OnClientEntryAdded client-side event handler a span is added to the entry DOM element and acts as a country flag.


    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 30 Oct 2014 in reply to Boyan Dimitrov Link to this post

    Thanks for your answer.

    I was able to get the token and see its properties.
    It looks like I could change its class name which is set to .racToken

    In the page where I defined the AutoCompleteBox, I added just to see if I could change the color of the background

    <style type="text/css">
        .RadWindow_Default a.rwIcon {
            background: url('Images/Icon_16.png') !important;
        }
     
        .racToken
        {
            margin: 0 3px 3px 0;
            background-color:red;
        }
    </style>


    But that does nothing.
    I think I am missing something in the path to the token class.
    Or maybe I cannot change the background directly like this?

    For example, I can change a Window icon with the '.RadWindow_Default a.rwIcon'
  6. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 03 Nov 2014 in reply to Mickael Link to this post

    I could use some help for this.
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 04 Nov 2014 Link to this post

    Hello,

    The token background is set using the style background-image for the .racToken class. The background-image property overrides the background-color and this is why you do not see the red background color. In this case you would need to set the background-image to none and set the background color using stronger selector as shown below:
    //css
    html .RadAutoCompleteBox .racToken {
        background-image:none;
        background-color:red;
    }


    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 04 Nov 2014 in reply to Boyan Dimitrov Link to this post

    Works perfectly thanks Boyan.

    Now, how can I change that per token?

    I would like some token to be blue others to be red for example.

    The code you provided changes all the token without exception.
  9. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 07 Nov 2014 Link to this post

    Hello,

    Please find below a sample solution that shows how to implement such functionality.
    //code
    <script type="text/javascript">
        function OnClientEntryAdded(sender, args) {
            if (args.get_entry().get_text() == "Janet") {
                var token = args.get_entry().get_token();
                $telerik.$(token).addClass("blue");
            }
        }
    </script>
     
    <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox2" EmptyMessage="Please type here"
                DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Token" Width="350" OnClientEntryAdded="OnClientEntryAdded">
            </telerik:RadAutoCompleteBox>
    //css
    html .RadAutoCompleteBox .racToken {
        background-image: none;
        background-color: red;
    }
     
    html .RadAutoCompleteBox .racToken.blue {
        background-image: none;
        background-color: blue;
    }


    In this case only Janet token will be colored in blue. All other tokens will have red background color. 


    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017