[Solved] AllowCustomEntry coloring

[Al]

Hi,

I have a RadAutoCompleteBox and a CSS style to color the box differently depending on if the box is disabled or not.
Everything works fine except for when I have the AllowCustomEntry set to true.
When set to false (And the control disabled), the background and fore color both change to the color I want.
When set to true (And the control disabled), the background color changes, however, the fore color remains the same.

Code:

<telerik:RadAutoCompleteBox ID="ACP_Name" runat="server" DropDownHeight="150px"

Skin="Default" DropDownWidth="200px" Style="z-index: 1; left: 220px; top: 167px;

position: absolute; height: 22px; width: 210px" OnClientRequesting="OnClientRequesting"

InputType="Text" AllowCustomEntry="True" TextSettings-SelectionMode="Single">

<WebServiceSettings Method="GetName" Path="MyWebService.asmx" />
</telerik:RadAutoCompleteBox>

CSS:

div.RadAutoCompleteBox_Default .racDisabled
        {
            background-color: #000099;
            border-color: #FFFFFF;
            color: #CCCCCC;
        }

Is there anything I can do to get the text color to change when the AllowCustomEntry is set to true?


Thanks!

[Princy]

Hi Al,

The forecolor can be changed using the .racInput CSS class. Please have a look at the following code I tried with AllowCustomEntry set to true which works fine at my end.

ASPX:

<telerik:RadAutoCompleteBox ID="ACP_Name" runat="server" DropDownHeight="150px"
    Skin="Default" DataSourceID="SqlDataSource1" DataTextField="ContactName" DropDownWidth="200px"
    InputType="Text" AllowCustomEntry="true" TextSettings-SelectionMode="Single">
</telerik:RadAutoCompleteBox>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="select ContactName from [Customers]"></asp:SqlDataSource>
<br />
<telerik:RadButton ID="RadButton1" runat="server" Text="Disable" OnClick="RadButton1_Click">
</telerik:RadButton>

C#:

protected void RadButton1_Click(object sender, EventArgs e)
{
    ACP_Name.Enabled = false;
}

CSS:

<style type="text/css">
    .RadAutoCompleteBox_Default .racTokenList
    {
        background-color: #FDFACE !important;
        border-color: Green !important;
    }
    .RadAutoCompleteBox_Default .racInput
    {
        color: Red !important;
    }
    div.RadAutoCompleteBox_Default .racDisabled
    {
        background-color: #E6E6E6 !important;
        border-color: #97C4ED !important;
    }
    .RadAutoCompleteBox_Default .racDisabled .racInput
    {
        color: Blue !important;
    }
</style>

Thanks,
Princy.

[Al]

Thanks!
That did work for that one auto complete box.
However, I have five total auto complete boxes on the page.  Two have AllowCustomEntry set to true while the other three have AllowCustomEntry set to false.

The fix you gave me showed the correct colors for the two with AllowCustomEntry set to true.  It however broke the other three.
Attached is a screenshot of what it looked like before I found a work around for it, all using the same skin.

The work around I found was to set the skins of the three different than the skins of the two and set the CSS to each skin.

CSS:

           div.RadAutoCompleteBox_Default .racDisabled .racInput
        {
            background-color: #000099;
            border-color: #FFFFFF;
            color: #CCCCCC;
        }
        div.RadAutoCompleteBox_WebBlue .racDisabled
        {
            background-color: #000099;
            border-color: #FFFFFF;
            color: #CCCCCC;
        }

The three with AllowCustomEntry set to false are using the WebBlue skin.
The two with AllowCustomEntry set to true are using the Default skin.


This currently works for what I am doing.
Is there something I am doing incorrectly?

[Princy]

Hi Al,

You can use the same skin for all the RadAutoCompleteBoxes. Please have a look at the following code I tried with AllowCustomEntry set to either values which works fine at my end.

ASPX:

<telerik:RadAutoCompleteBox ID="ACP_Name" runat="server" DropDownHeight="150px" Skin="Default"
    DataSourceID="SqlDataSource1" DataTextField="ContactNam1e" DropDownWidth="200px"
    InputType="Text" AllowCustomEntry="true" TextSettings-SelectionMode="Single">
</telerik:RadAutoCompleteBox>
<br />
<telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" DropDownHeight="150px"
    Skin="Default" DataSourceID="SqlDataSource1" DataTextField="ContactName" DropDownWidth="200px"
    InputType="Text" AllowCustomEntry="false" TextSettings-SelectionMode="Single">
</telerik:RadAutoCompleteBox>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="select ContactName from [Customers]"></asp:SqlDataSource>
<br />
<telerik:RadButton ID="RadButton1" runat="server" Text="Disable" OnClick="RadButton1_Click">
</telerik:RadButton>

CSS:

<style type="text/css">
    .RadAutoCompleteBox_Default .racTokenList
    {
        background-color: #FDFACE !important;
        border-color: Green !important;
        color: Red !important;
    }
    .RadAutoCompleteBox_Default .racInput
    {
        color: Red !important;
    }
    div.RadAutoCompleteBox_Default .racDisabled
    {
        background-color: #E6E6E6 !important;
        border-color: #97C4ED !important;
        color: Blue !important;
    }
    .RadAutoCompleteBox_Default .racDisabled .racInput
    {
        color: Blue !important;
    }
</style>

C#:

protected void RadButton1_Click(object sender, EventArgs e)
{
    ACP_Name.Enabled = false;
    RadAutoCompleteBox1.Enabled = false;
}

Thanks,
Princy.