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,...)
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
0
![](/forums/images/avatarimages/default.gif)
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.
If I missed something obvious like a tutorial link or something, just tell me.
0
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
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
![](/forums/images/avatarimages/default.gif)
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
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'
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
![](/forums/images/avatarimages/default.gif)
Mickael
Top achievements
Rank 1
answered on 03 Nov 2014, 02:20 PM
I could use some help for this.
0
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
Regards,
Boyan Dimitrov
Telerik
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
![](/forums/images/avatarimages/default.gif)
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.
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
Hello,
Please find below a sample solution that shows how to implement such functionality.
//code
//css
In this case only Janet token will be colored in blue. All other tokens will have red background color.
Regards,
Boyan Dimitrov
Telerik
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
>
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.