How to show the different colors for richselect values.
You need to use the advanced configuration of a control to access the properties of an option list (and the input) and use a template to implement different colouring:
{ view:"richselect", options:{
...advanced config...
}}
Check the snippet please: http://webix.com/snippet/84721e3c
The docs on this topic are here.
I want to make this colors dynamically ,because my data is coming from server dynamically and setting in richselect option value.Please give code snippet for this.
You can use the same approach as above, just use url instead of the data.
I too have the same problem.I have 2 richselecta in the same page.I want to override some of the css of webix but also need that the overriden css should affect only the first richselect and not the second one.Is there a way we can achieve that?
var color_array = ["yellow","red","green"]; var i = 0; webix.ui({ view:"richselect", label:"Default color in the input", labelWidth:200, options:{ template:"#value#", css:"addColor", body:{ template:"#value#
",
data:[
{ id:1, value:"First Red", color:"red",background:color_array[0]},
{ id:2, value:"Second Green", color:"green",background:color_array[1]},
{ id:3, value:"Third Blue", color:"blue",background:color_array[2]},
]
}
}
});
webix.ui({
view:"richselect", label:"Option color in the input", labelWidth:200,
options:{
template:"#value#",
body:{
template:"#value#
",
data:[
{ id:1, value:"First Red", color:"red",background:color_array[0]},
{ id:2, value:"Second Green", color:"green",background:color_array[1]},
{ id:3, value:"Third Blue", color:"blue",background:color_array[2]},
]
}
}
});
Overriden Css:
.webix_list_item {
padding: 0px;
}
.webix_list .webix_list_item.webix_selected {
padding: 0px;
background: none;
}
I don't want the second richselect to get affected.
Thanks
Hi, you need to define a custom CSS class for a suggest list (you’ve actually done it, the “addColor”) and use it while redefining the CSS: http://webix.com/snippet/4a8583d0