Change richselect's input color

Question

I wonder if it's possible to change the input's color in runtime.

Here's my select (Webix ui.richselect): http://webix.com/snippet/c64f9b12

{ 
  view:"richselect", label:"Status", options:[
    { id:1, value:"Done", $css:"done" },
    { id:2, value:"Processing", $css:"process" },
    { id:3, value:"On hold", $css:"on-hold" },
    { id:4, value:"Failed", $css:"failed" },
  ],
  on:{
    onChange:function(newV, oldV){           
      webix.message("Status changed to "+this.getList().getItem(newV).value)
    }
  }
}

Each $css key related to the CSS class that is applied to the item.

<style>
  .webix_list_item.done { 
    background:#ddf7dd; 
  }
  <!-- . . . -->
  .webix_list_item.webix_selected {
    color:black;
    font-weight:bold
  }
</style>

After changing the richselect's value, I need to set the background color of the newly selected item as the background color of the richselect.

In my opinion, it can be done through the onChange event, but I have no idea how exactly I can solve it.

Any suggestions? Thanks in advance.

Answer 1

Here is your solution:

http://webix.com/snippet/08e187a7

1) First, dynamically get the class name of the element clicked in order to fetch that element

var className = ".webix_list_item." + this.getList().getItem(newV).$css;
var element = document.querySelector(className);

2) Next, just get the computed background color of that element and set the same to the "newly selected" element.

document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = window.getComputedStyle(element,null).getPropertyValue("background-color");

I have written it one line, you could may be create variables and break it into more statements. say something like -

var clicked_bgcolor = window.getComputedStyle(element,null).getPropertyValue("background-color");

document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = clicked_bgcolor;

I prefer doing these 2 in one line though(above mentioned).

So your final onChange code would be :

  on:{
    onChange:function(newV, oldV){           
      webix.message("Status changed to "+this.getList().getItem(newV).value);

      var className = ".webix_list_item." + this.getList().getItem(newV).$css;
      var element = document.querySelector(className);
      document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = window.getComputedStyle(element,null).getPropertyValue("background-color");
    }
  }

Let me know if any issues.

PS: Try to use JQuery more often, you could avoid such lengthy complicated JavaScript statements.

Answer 2

Thanks @Nikhil for the answer, it helped me to apply my combo logic on the richselect in the webix way.

So, the difference was that in the combo i was applying the style on the input and it was working but for the richselect applying the style on input was wrong rather i have to apply on the .webix_inp_static .

1. CSS

In your style for each of your custom css on webix_list_item you have to also add css for .webix_inp_static as shown:

<style>
  .done .webix_inp_static,.webix_list_item.done { 
    background:#ddf7dd; 
  }
</style>

2. onChange function

You have to removeCss on the oldV if existing and addCss on the newV as:

onChange:function(newV, oldV){ 
         if(oldV) webix.html.removeCss(this.getNode(), this.getList().getItem(oldV).$css);   
         if(newV) webix.html.addCss(this.getNode(), this.getList().getItem(newV).$css);            
        }

Please check the snippet here.