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

How to change the look of AutoCompleteBox entries ?

7 Answers 201 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Mickael
Top achievements
Rank 1
Mickael asked on 23 Oct 2014, 01:14 PM
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,...)

7 Answers, 1 is accepted

Sort by
0
Mickael
Top achievements
Rank 1
answered on 27 Oct 2014, 05:36 PM
I could really use some help on this topic.
If I missed something obvious like a tutorial link or something, just tell me.
0
Boyan Dimitrov
Telerik team
answered on 28 Oct 2014, 12:22 PM
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.

 
0
Mickael
Top achievements
Rank 1
answered on 30 Oct 2014, 03:34 PM
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'
0
Mickael
Top achievements
Rank 1
answered on 03 Nov 2014, 02:20 PM
I could use some help for this.
0
Boyan Dimitrov
Telerik team
answered on 04 Nov 2014, 09:30 AM
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.

 
0
Mickael
Top achievements
Rank 1
answered on 04 Nov 2014, 02:18 PM
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.
0
Accepted
Boyan Dimitrov
Telerik team
answered on 07 Nov 2014, 08:05 AM
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.

 
Tags
AutoCompleteBox
Asked by
Mickael
Top achievements
Rank 1
Answers by
Mickael
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or