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

Change Token colors

3 Answers 246 Views

AutoCompleteBox

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

Ratzai asked on 12 Nov 2012, 03:04 PM

I have tried to change the ForeColor and BackColor of a RACB token, but the styling doesn't appear when i add the tokens. Is it not possible to change the colors from code-behind?

Here is my code:

foreach (string chemical in chemicalsArrayList)

{

AutoCompleteBoxEntry entry = new AutoCompleteBoxEntry();

chemicalBC = BCFactory.ChemicalBC;

DataSet dsClassifications = chemicalBC.GetClassificationByChemicalName(chemical);

entry.Text = chemical;

if (dsClassifications.Tables[0].Rows.Count != 0)

{

entry.ToolTip = dsClassifications.Tables[0].Rows[0][0].ToString();

entry.ForeColor = System.Drawing.ColorTranslator.FromHtml("#" + dsClassifications.Tables[0].Rows[0]["Color"].ToString());

}

else

{

entry.ToolTip = "";

}

racbChemicals.Entries.Add(entry);

}

3 Answers, 1 is accepted

answered on 15 Nov 2012, 01:49 PM

Hi Ratzai,

Changing the background color of a RadAutoCompleteBox entry is not a supported scenario.

However you can try implementing client-side logic with JavaScript and change it.
I can suggest you handle the OnClientEntryAdding event and add a custom CSS to the entry token element in this way:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

div.RadAutoCompleteBox_Default .racBlueToken

{

background-color: #25A0DA;

border-color: #25A0DA;

color: #000;

}

</style>

<script type="text/javascript">

function onClientEntryAdded(sender, eventArgs)

{

var $ = $telerik.$;

var entry = eventArgs.get_entry();

var tokenElement = eventArgs.get_entry().get_token();

if(entry.get_text() == "Andrew")

$(tokenElement).addClass("racBlueToken");

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="manager" runat="server"></asp:ScriptManager>

<telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox2"

DataSourceID="SqlDataSource1" OnClientEntryAdded="onClientEntryAdded"

AllowCustomEntry="true" DataTextField="FirstName" InputType="Token">

</telerik:RadAutoCompleteBox>

<asp:SqlDataSource runat="server" ID="SqlDataSource1"

ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"

ProviderName="System.Data.SqlClient"

SelectCommand="SELECT [FirstName], [LastName], [EmployeeID] FROM [Employees]" />

</div>

</form>

</body>

</html>

Regards,
Kalina
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 28 Jan 2020, 03:46 PM

Hello,

You can add custom attributes which you can access in the OnClientEntryAdded event and style it with JavaScript:

protected void RadAutoCompleteBox1_EntryAdded(object sender, Telerik.Web.UI.AutoCompleteEntryEventArgs e)
{
    e.Entry.Attributes.Add("data-backcolor", "red");
}

function OnClientEntryAdded(sender, args) {
    var entry = args.get_entry();
    var tokenElement = entry.get_token();
    var backcolor = args.get_entry().get_attributes().getAttribute("data-backcolor");

    if (backcolor) {
        tokenElement.style.backgroundImage = "none";
        tokenElement.style.backgroundColor = backcolor;
    }
}

Regards,
Peter Milchev
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.