Radcombo : Selected item does not display Color Formatting

9 posts, 0 answers
  1. sushil jinder
    sushil jinder avatar
    8 posts
    Member since:
    Jun 2009

    Posted 02 Mar 2010 Link to this post

    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
  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 02 Mar 2010 Link to this post

    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.
  3. sushil jinder
    sushil jinder avatar
    8 posts
    Member since:
    Jun 2009

    Posted 02 Mar 2010 Link to this post

    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
  4. sushil jinder
    sushil jinder avatar
    8 posts
    Member since:
    Jun 2009

    Posted 02 Mar 2010 Link to this post

    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.
  5. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 04 Mar 2010 Link to this post

    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.
  6. sushil jinder
    sushil jinder avatar
    8 posts
    Member since:
    Jun 2009

    Posted 05 Mar 2010 Link to this post

    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


  7. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 09 Mar 2010 Link to this post

    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.
  8. Steven
    Steven avatar
    27 posts
    Member since:
    May 2012

    Posted 20 Jun 2012 Link to this post

    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.
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Jun 2012 Link to this post

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