changing appearance of items dropped in combo box

5 posts, 0 answers
  1. Scott Nolen
    Scott Nolen avatar
    17 posts
    Member since:
    Mar 2010

    Posted 08 Nov 2010 Link to this post

    I have a need to either change the forecolor or the backcolor of certain items within a combo box dropdown list. Some may need both applied. I have a default backcolor to white and a default forecolor to black. The dropdown is a list of bills. If one bill contains hazardous cargo then i want the bill number to be red instead of black letters. If the bill is no longer an active bill then i want the change the backcolor of the item to be pink instead of white. If it is an inactive hazardous bill then i want red letters and a pink background to both apply. Changing the forecolor to red is working. Changing the backcolor is not working. The backcolor ends up visually not applying to the proper row. I am setting this within the ItemsRequested event with the code below within the loop that adds the data and binds it to the combo. (attached is a sceenshot of the results, each row where the column == N then the backcolor should be pink)

     

     

    string mystatus;

     

    mystatus = lBooking.STATUS;

    item.Attributes.Add(

     

    "STATUS", mystatus);

     

     

     

    string myhaz;

     

    myhaz = lBooking.HazFlag;

    item.Attributes.Add(

     

    "HazFlag", myhaz);

     

    rcboBookingNum.Items.Add(item);

     

     

    if (myhaz=="Y")

     

    {

    rcboBookingNum.Items[myitemcounter].ForeColor = System.Drawing.

     

    Color.Red;

     

    }

     

     

    if (mystatus == "N")

     

    {

    rcboBookingNum.Items[myitemcounter].BackColor = System.Drawing.

     

    Color.Pink;

     

    }

    myitemcounter = myitemcounter + 1;




    XAML CODE :


     

     

    <telerik:RadComboBox ID="rcboBookingNum" runat="server" OnItemsRequested="rcboBookingNum_ItemsRequested"

     

     

     

    EnableLoadOnDemand="True" AllowCustomText="True" DropDownWidth="555px" AutoPostBack="True"

     

     

     

    OnSelectedIndexChanged="rcboBookingNum_SelectedIndexChanged" ShowDropDownOnTextboxClick="False"

     

     

     

    OnClientKeyPressing="OnClientKeyPressingrcboBookingNum"

     

     

     

    MaxHeight="150"

     

     

     

    Width="120px" Skin="Outlook" HighlightTemplatedItems="false" EnableTheming="False"

     

     

     

    CssClass="MainPageCellInputs ForceCaps"

     

     

     

    MaxLength="13" TabIndex="1"

     

     

     

    MarkFirstMatch="True">

     

     

     

    <CollapseAnimation Type="None" />

     

     

     

    <HeaderTemplate>

     

     

     

    <table width="530px" class="rcbo_tbl10" align="left">

     

     

     

    <tr>

     

     

     

    <td style="width: 100px" class="dd_col10 dd_head10">

     

    Booking Num

     

     

    </td>

     

     

     

    <td style="width: 230px" class="dd_col10 dd_head10">

     

    Ship Name

     

     

    </td>

     

     

     

    <td style="width: 80px;text-align:center;" class="dd_col10 dd_head10">

     

    Status

     

     

    </td>

     

     

     

    <td style="width: 80px;text-align:center;" class="dd_col10 dd_head10">

     

    Hazardous

     

     

    </td>

     

     

     

    </tr>

     

     

     

    </table>

     

     

     

    </HeaderTemplate>

     

     

     

    <ItemTemplate>

     

     

     

    <table width="530px" class="rcbo_tbl10" align="left">

     

     

     

    <tr>

     

     

     

    <td style="width: 100px" class="dd_col10">

     

    <%

     

    # DataBinder.Eval(Container, "Text")%>

     

     

     

    </td>

     

     

     

    <td style="width: 230px" class="dd_col10">

     

    <%

     

    # DataBinder.Eval(Container, "Attributes['ShipName']") %>

     

     

     

    </td>

     

     

     

    <td style="width: 80px;text-align:center;" class="dd_col10">

     

    <%

     

    # DataBinder.Eval(Container, "Attributes['STATUS']")%>

     

     

     

    </td>

     

     

     

    <td style="width: 80px;text-align:center;" class="dd_col10">

     

    <%

     

    # DataBinder.Eval(Container, "Attributes['HazFlag']")%>

     

     

     

    </td>

     

     

     

    </tr>

     

     

     

    </table>

     

     

     

    </ItemTemplate>

     

     

     

    </telerik:RadComboBox>

     


  2. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 15 Nov 2010 Link to this post

    Hi Scott Nolen,

    The issue that you describe seems to be related to the CSS styles that you use.

    Let me suggest you set the background and text color of the RadComboBox items based on their status at client-side instead of doing this at server-side ItemsRequested event handler.
    <telerik:RadComboBox ID="rcboBookingNum" runat="server"
    OnItemsRequested="rcboBookingNum_ItemsRequested"
    EnableLoadOnDemand="True" AllowCustomText="True"
    DropDownWidth="555px" AutoPostBack="True"
    OnSelectedIndexChanged="rcboBookingNum_SelectedIndexChanged"
    ShowDropDownOnTextboxClick="False"
    OnClientItemsRequested="OnClientItemsRequestedHandler"
    OnClientKeyPressing="OnClientKeyPressingrcboBookingNum"
    MaxHeight="150" Width="120px"
    Skin="Outlook"
    HighlightTemplatedItems="false"
    EnableTheming="False"
    CssClass="MainPageCellInputs ForceCaps"
    MaxLength="13"
    TabIndex="1" MarkFirstMatch="True">
    <CollapseAnimation Type="None" />
    <HeaderTemplate>
        <table style="width: 300px;">
            <tr>
                <td style="width: 150px;">
                    Booking
                </td>
                <td style="width: 150px;">
                    Num Status
                </td>
            </tr>
        </table>
    </HeaderTemplate>
    <ItemTemplate>
        <table style="width: 300px;">
            <tr>
                <td style="width: 150px;">
                    <%# DataBinder.Eval(Container, "Text")%>
                </td>
                <td style="width: 150px;">
                    <%# DataBinder.Eval(Container, "Attributes['STATUS']")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
    </telerik:RadComboBox>

    function OnClientItemsRequestedHandler(sender) {
     
        var combo = sender;
         
        var items = combo.get_items();
        for (i = 0; i < items.get_count(); i++) {
     
            if (items.getItem(i).get_attributes().getAttribute("Status") == "Y") {
                var li = items.getItem(i).get_element();
                li.style.backgroundColor = "pink";
            }
            if (items.getItem(i).get_attributes().getAttribute("Status") == "Y&N") {
                var li = items.getItem(i).get_element();
                li.style.backgroundColor = "pink";
                li.style.color = "red";
            }
        }
     
    }

    Please find more details at the sample page attached.

    Regards,
    Kalina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Scott Nolen
    Scott Nolen avatar
    17 posts
    Member since:
    Mar 2010

    Posted 15 Nov 2010 Link to this post

    This did not help. See code below that i used. It is still placing the pink background on the incorrect row. (see attached screenshot). The pink backcolor is supposed to be on the rows where "STATUS" = "N" but it is rendered on the wrong row.


     

     

    function rcboBookingNumOnClientItemsRequested(sender,eventArgs) {

     

     

     

        var combo = sender;

     

     

     

        var items = combo.get_items();

     

     

     

        for(i = 0; i < items.get_count(); i++) {

     

     

     

     

            if(items.getItem(i).get_attributes().getAttribute("HazFlag") == "Y") {

     

     

     

                var li = items.getItem(i).get_element();

     

                li.style.color =

     

    "red";

     

            }

     

     

            if(items.getItem(i).get_attributes().getAttribute("STATUS") == "N") {

     

     

     

                var li = items.getItem(i).get_element();

     

                li.style.backgroundColor =

     

    "pink";

     

            }

        }

    }


     

     

     

    <telerik:RadComboBox ID="rcboBookingNum" runat="server" OnItemsRequested="rcboBookingNum_ItemsRequested"

     

     

     

     

     

     

     

    EnableLoadOnDemand="True" AllowCustomText="True" DropDownWidth="555px" AutoPostBack="True"

     

     

     

     

     

     

     

    OnSelectedIndexChanged="rcboBookingNum_SelectedIndexChanged" ShowDropDownOnTextboxClick="False"

     

     

     

     

     

     

     

    OnClientKeyPressing="OnClientKeyPressingrcboBookingNum"

     

     

     

     

     

     

     

    OnClientItemsRequested="rcboBookingNumOnClientItemsRequested"

     

     

     

     

     

     

     

    MaxHeight="150"

     

     

     

     

     

     

     

    Width="120px" Skin="Outlook" HighlightTemplatedItems="false" EnableTheming="False"

     

     

     

     

     

     

     

    CssClass="MainPageCellInputs ForceCaps"

     

     

     

     

     

     

     

    MaxLength="13" TabIndex="1"

     

     

     

     

     

     

     

    MarkFirstMatch="True">

     

     

     

     

     

     

     

    <CollapseAnimation Type="None" />

     

     

     

     

     

     

     

    <HeaderTemplate>

     

     

     

     

  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 19 Nov 2010 Link to this post

    Hello Scott Nolen,

    I used the code that you pasted here and created a test page - on my side your code works correctly.
    Please take a look at this demonstration video.
    Additionally – please download the test page and give it a try.
    Once again I will recommend you check what css styles are applied to your RadComboBox and especially the margins and paddings applied.

    Greetings,
    Kalina
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Scott Nolen
    Scott Nolen avatar
    17 posts
    Member since:
    Mar 2010

    Posted 19 Nov 2010 Link to this post

    I figured it out. It was the align="left" statement below for the header and item templates.

     

     

    <table width="530px" class="rcbo_tbl10" align="left">

     

Back to Top