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

[Solved] Combo box color picker

8 Answers 330 Views

ComboBox

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

Keith Warburton asked on 12 Mar 2008, 01:25 AM

Hi,

I am trying to implement a color picker using combo box. I have used Div tag to display the colour and a label to display the colour name in Item Template. When an item is selected only the text (color name) is displayed. How do I display the selected color as well.

    
            <rad:RadComboBox ID="RadComboBox1" runat="server" SkinsPath="~/RadControls/ComboBox/Skins" 
        
                        Width="150px"> 
        
                        <Items> 
        
                            <rad:RadComboBoxItem runat="server" Text="Red" /> 
        
                            <rad:RadComboBoxItem runat="server" Text="green" /> 
        
                            <rad:RadComboBoxItem runat="server" Text="blue" /> 
        
                        </Items> 
        
                        <ItemTemplate> 
        
                            <div style=" float:left; width: 10px; height: 25px; background-color: blue">  
        
                            </div> <asp:Label ID="Label3" runat="server" Text='<%# DataBinder.Eval(Container, "Text") %>'></asp:Label> 
        
                        </ItemTemplate> 
        
                    </rad:RadComboBox>

Thanks,
Keith.

8 Answers, 1 is accepted

answered on 13 Mar 2008, 03:41 PM

Hello Keith Warburton,

You can implement this, although I would suggest using the RadColorPicker if possible.

Here are the steps:

Hook on the OnClientSelectedIndexChanged event
Set the background of the input area as follows:

    
            function SetBackground(item) 
        
            {       
        
                var combo = item.ComboBox; 
        
                var inputElement = document.getElementById(combo.InputID); 
        
                //put an image here or a color 
        
                inputElement.style.background = 'url(images/small/' + item.Attributes.ImageName + ') no-repeat scroll left left'; 
        
                inputElement.value = item.Text;            
        
            }

I hope this will get you started.

Regards,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 14 Mar 2008, 12:02 AM

Thanks Veskoni. What I want to implement is not a simple static color picker. The problem statement is as follows. I have a combo box that lists the impacts of an action as Very High, High, Moderate, Low ...etc. and each of the values has a color code associated with it. The color codes are not static and can be changed by the admin in the system.

The datasource for the combo is a list object that contains the impact values and the associated color codes.

The combo should display the color code in a rectangular box and the text beside it. When an item is selected, both the color rectangle and text should get selected and displayed.

In addition, if an action already has an impact value, the combo should display that when the page loads i.e the rectangular box and the text.

Plz let me know how this can be done.

    
            <rad:RadComboBox id="rcbEffectiveness" runat="server" SkinId="WithButton"  SkinsPath="~/RadControls/ComboBox/Skins"> 
        
                    <ItemTemplate> 
        
                             <div style="float:left;elevation:above; azimuth:rightwards; height:12px; width: 20px; background-color: <%# DataBinder.Eval(Container.DataItem, "Color") %>"> </div> 
        
                             <asp:Label Font-Names ="Arial" Font-Size="10pt" ID="txtEffectivenessDescription" runat="server"  TabIndex="2" Text='<%# DataBinder.Eval(Container.DataItem, "Description") %>'></asp:Label> 
        
                            </ItemTemplate>  
        
                    </rad:RadComboBox>

In the above code, the Div tag gives the rectangular box to display the color. But when an item is selected only the text gets displayed. How do I display both not only when an item is selected when the page loads as well (if a value is predifined).

Thanks,
Keith.

answered on 17 Mar 2008, 04:13 PM

Hi Keith Warburton,

You can hook on the OnClientSelectedIndexChanged event handler and change the background of the input element like this:

    
            function onClientSelectedIndexChanged(item) 
        
            { 
        
                var combo = item.ComboBox; 
        
                var comboInput = document.getElementById(combo.InputID); 
        
                //here ItemColor is a custom attribute that you can assign in ItemDatabound event 
        
                comboInput.style.backgroundColor = item.Attributes.ItemColor; 
        
            } 
        
            </script>

I hope this will get you started.

Kind regards,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Accepted

answered on 22 Dec 2009, 01:57 PM

Hello.

I have a RadComboBox with some items having an ImageUrl set to a .gif file path.
When the DropDown is open the images are displayed on the left of the text. Fine.

I would like to have the Image of the selected item to be displayed in the input area. The normal behavior of the combox is to display the text only. What should I do to have the image displayed as well ?

I looked at the ComboBox as Color Picker sample project. I found it quite complex. Is there a way to implement it in a easier way ?

Thanks for you help.

Regards
Augusto