How to change the look of AutoCompleteBox entries ?

[Mickael]

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,...)

[Mickael]

I could really use some help on this topic.
If I missed something obvious like a tutorial link or something, just tell me.

[Boyan Dimitrov]

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

 

 

[Mickael]

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'

[Mickael]

I could use some help for this.

[Boyan Dimitrov]

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

 

 

[Mickael]

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.

[Boyan Dimitrov]

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