Styling the selected item

[BrentHParticipant]

Is there a way to style the selected item? I have

var drawColorSource = ["Red", "Orange", "Yellow", "Green", "Cyan", "Blue", "Purple", "Magenta", "Brown", "White", "LightGray", "DarkGray", "DimGray", "Black"];
    $("#drawColor").jqxComboBox({
        source: drawColorSource, selectedIndex: 0, width: '90', height: '18', dropDownHeight: 175, theme: 'ui-smoothness',
        renderer: function (index, label, value) {
            var backcolor = drawColorSource[index];
            var forecolor = 'white';
            if (index == 1 || index == 2 || index == 3 || index == 4 || index == 9 || index == 10 || index == 11)
                forecolor = 'black';
            var span = '<span style="background-color: ' + backcolor.toLowerCase() + '; color: ' + forecolor + ';">' + backcolor + '</span>';
            return span;
        },
        renderSelectedItem: function (index, item) {
            var backcolor = drawColorSource[index];
            var forecolor = 'white';
            if (index == 1 || index == 2 || index == 3 || index == 4 || index == 9 || index == 10 || index == 11)
                forecolor = 'black';
            var span = '<span style="background-color: ' + backcolor.toLowerCase() + '; color: ' + forecolor + ';">' + backcolor + '</span>';
            return span;
        }
    });

But I just get the span text in text. Can I make the selected item look like in the dropdown?

Thanks

[DimitarParticipant]

Hello BrentH,

As stated in the jqxComboBox API Documentation, by using the renderSelectedItem function, you can customize the displayed text in the ComboBox’s input field. Unfortunately, you cannot display anything other than text information there.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[BrentHParticipant]

So, is there any way to alter the styling (background and foreground colors) of the control based on the ‘select’ event?

[DimitarParticipant]

Hi BrentH,

You can (dynamically) change the style of the displayed text in the combobox input by modifying the CSS of the class jqx-combobox-input, e.g.:

<style type="text/css">
    .jqx-combobox-input
    {
        font-style: italic;
    }
</style>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[BrentHParticipant]

That is at design time. I would like to do it in the select event of your combo box.

This

$("#drawColor").jqxComboBox.style.background = backcolor;
 $("#drawColor").jqxComboBox.style.color = forecolor;

Doesn’t seem to work.

Brent

[DimitarParticipant]

Hi Brent,

CSS adjustments can be made dynamically through jQuery’s .css() method. In your case, that would be:

$(".jqx-combobox-input").css("background-color", backcolor);
$(".jqx-combobox-input").css("color", forecolor);

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[BrentHParticipant]

Thanks, I think I finally got it!

[Author]

Posts