Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Eugenio Hvozdikov
245
How to achieve igCombo default selected-item background color for many igCombos?
posted

I have many igCombo, each needs to have the selected item background color different from another, so nothing to change JS.

I would like to just tie the id of the div interested by igCombo with the class of the igCombo "ui-state-active" but because the list of items is generated elsewhere I can't do this.

Any tip on how to achieve this?

Parents
  • 16310
    Offline posted

    Hi Eugenio,

    Currently the dropdown lists are not differentiated by id or class. They are exactly the same for each combo on the page, and each combo widget has a reference to its own list.

    Therefore so you will need to add id/class to every list:

    $("#autoCompleteCombo").igCombo({
...
}).data().igCombo.dropDown().addClass("pinkColor");

$("#filterContainsCombo").igCombo({
...
}).data().igCombo.dropDown().addClass("green");

$("#caseSensitiveCombo").igCombo({
...
}).data().igCombo.dropDown().addClass("yellow");

    in order to query them using CSS selectors:

    .pinkColor .ui-igcombo-listitemholder li.ui-state-active {
  background-color: pink;
}

.green .ui-igcombo-listitemholder li.ui-state-active {
  background-color: green;
}

.yellow .ui-igcombo-listitemholder li.ui-state-active {
  background-color: yellow;
}

    Please review the jsfiddle that I have prepared for you and let me know if you have further questions, I will be glad to help.

Reply Children