changing appearance of items dropped in combo box

[Scott Nolen]

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>

 

[Kalina]

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

[Scott Nolen]

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>

 

 

 

 

[Kalina]

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

[Scott Nolen]

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">