Radcombo : Selected item does not display Color Formatting

[sushil jinder]

Hi, I am using the RADCombo. As per the requirement I have to format(Red color in my example) some items in the combobox based on some conditions.Formatting is done absolutely fine, but I face problem when the formatted item is selected. If a non-formatted item is selected then no issues, BUT if the user selects the formatted item, the formatting is not displayed but it simply shows the item without any format e.g. without any color in this case. I attach the simple code snipptes for your refence. please do the needful. protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

LoadData();

}

}

private void LoadData()

{

// Add 1st Item

Telerik.Web.UI.RadComboBoxItem aItem;

aItem = new Telerik.Web.UI.RadComboBoxItem("Item2-invalid", "1");

aItem.Attributes.Add("style", "background-color: ORANGERED"); //Make the back color Red

aItem.ToolTip = "Invalid";

ddl1.Items.Add(aItem);

// Add 2nd Item

aItem = new Telerik.Web.UI.RadComboBoxItem("Item1", "2");

ddl1.Items.Add(aItem);

// Add 3rd Item

aItem = new Telerik.Web.UI.RadComboBoxItem("Item3", "3");

ddl1.Items.Add(aItem);

// Add 4thItem

ddl1.Items.Insert(0, new Telerik.Web.UI.RadComboBoxItem("Select", "0"));

}

 

 <form id="form1" runat="server">
    <div>
    <VStars:ScriptManager ID="mgr1" runat="server"></VStars:ScriptManager>
        <VStars:ComboBox ID="ddl1" runat="server">
        </VStars:ComboBox>
    </div>
    </form>

 

 

 

 

 

 

 

 

Thanks
Sushil Jinder

[Schlurk]

The selected item actually has its own style - so if you were to want to keep this style you would also have to change the style of the selected item. I think if you look at the SelectedIndexChanged event you should be able to apply whatever logic needed to maintain the same appearance.

[sushil jinder]

Please note
1/ I do not want the comboBox to make postbacks as there is no need in my case, so the question of "SelectedIndexChanged"
does not arise.
2/ The same code works with ASP.NET dropdown without making any change.

So do we have any workaround without making any postbacks.

Thanks,
Sushil

[sushil jinder]

Hi,
For a moment if we agree on postback too and I apply the same code (for formatting) in the "SelectedIndex" change event of combox, even then ComboBox does not show the formatting. Here is code snippet I added as per your suggestion:

protected void ddl1_SelectedIndexChanged(object o, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
        {
            if (ddl1.SelectedValue == "1")
            {
                ddl1.SelectedItem.Attributes.Add("style", "background-color: ORANGERED"); //Make the back color Red
            }
        }

But its not helping us out.

One more interesting fact is We need not to apply the same formatting again on selectedIndexChange. The reason is if we check the attribute of SelectedItem, the style is already there. I executed the following line in immediate window to check before applying the formatting again.

ddl1.SelectedItem.Attributes["style"]
"background-color: ORANGERED"

Any help regarding this, please revert.

[Simon]

Hello sushil jinder,

You can override the styles for the normal and selected Item in the RadComboBox with the following two rules:

div.RadComboBoxDropDown .rcbItem
{
    background-color: orangered;
}

div.RadComboBoxDropDown .rcbHovered
{
    background-color: Green;
}

Sincerely yours,
Simon
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.

[sushil jinder]

Hi Simon,

Thanks for the answer, but I am sorry to say this is not applicable in our case. As suggested by you, if we apply the CSS class for "rcbItem", it will be applied for each item in comboBox, which is not required in our case.

As stated in the previous conversions, the formatting we have already applied to the some items (at runtime we will determine which item to format) when user click the combox to choose any item, all items (formatted and unformatted) are displayed to him/her, BUT the only problem is if user selected a formatted item, the formatting is not appeared.

MoreOver, "rcbHovered" is also not required, becuase after selecting the formatted item user may focus on other controls on page, in that case also format of the item should be visible.

Attached are two images showing two snaps of combBox, hope this helps to understand the issue.

Please provide us concrete solution as this is urgent required for our project.

Thanks,
Sushil Jinder

[Simon]

Hi sushil jinder,

Thank you for providing the screenshots and explanation.

If I have understood correctly you want to:

• Set a different background color to some of the Items.
• Change the input background color whenever a colored Item is selected.

If this is correct then you can achieve this by handling the client-side SelectedIndexChanged in this way:

function onSelectedIndexChanged(sender, eventArgs) {
    var item = eventArgs.get_item();

    sender.get_inputDomElement().style.backgroundColor =
        item.get_element().style.backgroundColor;
}

Please let me know whether this helps.

Sincerely yours,
Simon
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.

[Steven]

I am having the same problem.  When I select and item, it uses the grey formatting as shown in the attached image called "selected."  I need the selected item to show in its color.  See the attached screenshots.

The javascript fix did not work.

[Princy]

Hi Steven,

Following is the sample code that I tried based on your scenario.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">
     <Items>
            <telerik:RadComboBoxItem Text="RadComboBoxItem1" BackColor="Red" />
            <telerik:RadComboBoxItem Text="RadComboBoxItem2" BackColor="Gray" />
            <telerik:RadComboBoxItem Text="RadComboBoxItem3" BackColor="Green" />
            <telerik:RadComboBoxItem Text="RadComboBoxItem4" BackColor="Pink" />
            <telerik:RadComboBoxItem Text="RadComboBoxItem5" BackColor="Blue" />
            <telerik:RadComboBoxItem Text="RadComboBoxItem6" BackColor="White" />
     </Items>
</telerik:RadComboBox>

JS:

<script type="text/javascript">
    function OnClientSelectedIndexChanged(sender, args) {
        var item = args.get_item();
        sender.get_inputDomElement().style.backgroundColor =item.get_element().style.backgroundColor;
    }
</script>

Hope this helps.

Thanks,
Princy.