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

AllowCustomEntry coloring

3 Answers 64 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Al
Top achievements
Rank 1
Al asked on 05 Sep 2013, 08:19 PM
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!


3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 06 Sep 2013, 10:01 AM
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.
0
Al
Top achievements
Rank 1
answered on 06 Sep 2013, 07:18 PM

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?

0
Princy
Top achievements
Rank 1
answered on 09 Sep 2013, 05:26 AM
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.
Tags
AutoCompleteBox
Asked by
Al
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Al
Top achievements
Rank 1
Share this question
or