AllowCustomEntry coloring

4 posts, 0 answers
  1. Al
    Al avatar
    19 posts
    Member since:
    Oct 2012

    Posted 05 Sep 2013 Link to this post

    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!


  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Sep 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Al
    Al avatar
    19 posts
    Member since:
    Oct 2012

    Posted 06 Sep 2013 Link to this post


    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?

  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Sep 2013 Link to this post

    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.
Back to Top