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

Radcombo : Selected item does not display Color Formatting

8 Answers 217 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
sushil jinder
Top achievements
Rank 1
sushil jinder asked on 02 Mar 2010, 02:03 PM
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

8 Answers, 1 is accepted

Sort by
0
Schlurk
Top achievements
Rank 2
answered on 02 Mar 2010, 06:08 PM
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.
0
sushil jinder
Top achievements
Rank 1
answered on 03 Mar 2010, 04:30 AM
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
0
sushil jinder
Top achievements
Rank 1
answered on 03 Mar 2010, 04:47 AM
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.
0
Simon
Telerik team
answered on 04 Mar 2010, 03:55 PM
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.
0
sushil jinder
Top achievements
Rank 1
answered on 05 Mar 2010, 06:05 AM
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


0
Simon
Telerik team
answered on 09 Mar 2010, 06:00 PM
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.
0
Steven
Top achievements
Rank 1
answered on 20 Jun 2012, 10:15 PM
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.
0
Princy
Top achievements
Rank 2
answered on 21 Jun 2012, 04:56 AM
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.
Tags
ComboBox
Asked by
sushil jinder
Top achievements
Rank 1
Answers by
Schlurk
Top achievements
Rank 2
sushil jinder
Top achievements
Rank 1
Simon
Telerik team
Steven
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or