Hello community,
Is there a way to set the background color of the cells in a combo drop down list to the value in the cells? We already have a databank and table filled with hexadecimal colors.
Hello @Viplav04 ,
I’m afraid the description of the issue is not clear for us. Could you please clarify the use-case? Do you mean the combo view or an editor in the datatable?
Hello @annazankevich
Thank you for replying!
I mean the combo view. It has a gridsuggest in options and uses a table from our SQL server. The table has a list of color hexadecimal code. I want to show the list with the cell background equal to the cell value in the dropdown view when I click on the combo button in the editor.
For example, when I open my combo box, I have two columns:
FFF0F8FF AliceBlue
FFFAEBD7 AntiqueWhite
I want set the background color of each cell of the first column equal to the value.
Should I define a template inside the body as a function (obj) :
template: function (obj) {
obj.background = obj.value;
},
Hello @@Viplav04 ,
It is possible to redefine template like this:
{
view:"combo",
...
options:{
body:{
template:'<span style="background-color:#css#">#value#</span>',
...
}}}
In your case, you can attact onChange event and add some custom logic:
- use the native html getElementsByClassName method и change the background via the style.background property.
Overall, the end result would look like this:
Code Snippet
Please correct me if I didn’t understand your use case correctly.
@annazankevich
Yes, thank you. It matches my use case.
Now I just have to figure out how to put the color column value in place of the manual data.
Hello, I am using the scheme $init function inside the body of my combo.This is where the datatable is loaded.
scheme: {
$init: function (item) // Event,
{
var j = item.Col_ColorKey;
var css = "#" + j;
item.style.background = css
}
},
item here has the Col_ColorKey column which I want to use as a variable and assign it to the background-color. How to access the backgrund color property here??
Hello @annazankevich
Please suggest the correct usage for this :
scheme: {
$init: function (data) // Event, add row
var j = data.Col_ColorKey;
var css = "#" + j;
var item = $$(pId).getPopup().getList().config.columns[0];
item.template = css;
I want to set the background color of the cell with the color value. The data is the object which has the color value and is loaded row by row. Or is there another way to access the cell by getElementbyClassName. I could not find a class for the cell inside the (combo).getPopup().getList().$view while debugging.
Hi @intregal ,
Thank you for replying.
I am using scheme inside body where my data is loaded. eachRow() does not work here because there is only one row being loaded at a time.
Is there a way to select the active row and the cell and set it to item?
Something like :
var item = $$(pId).getPopup().getList().getRow(); ??
item.style.BackgroundColor = css;
@Viplav04
scheme is not the place for eachRow
but if you have to use scheme->$init then try this
scheme: {
$init: function(obj){
let color = obj.Col_ColorKey;
if(!color)return;
obj.$css = $cssCache[color] || ($cssCache[color] = webix.html.createCss({"background-color":"#"+color}));
}
}
Hi @intregal
I also tried it this way:Code Snippet
because I only want one column to be colored now. But when I scroll my list in the combobox the colors go away. Which event should be used??
probably you are using combo’s onAfterRender event, while required is combo->popup->body onAfterRender
can you share a snippet?
Hi @intregal
I am using the “onafterRender” inside options → body → on
myCombo = new webix.ui({
// var config = {
view: 'combo',
id: pId,
container: pDivName,
select: 'row',
on: {
'onAfterRender': function () {
return;
},
},
options:
{
view: 'gridsuggest',
body:
{
scroll: true,
resizeColumn: false,
autoheight: false,
autowidth: false,
on:
{
'onAfterRender': function () {
this.eachRow(id => {
let item = this.getItem(id), node;
if ("want to paint full row") {
this.eachColumn(colId => {
node = this.getItemNode({ row: id, column: colId });
if (node && colId == "Col_ColorKey") {
var colorstr = item.Col_ColorKey;
var color = new a00.SolidColorBrush(a00.api.PGetColor(colorstr));
if (!color.Color) return;
node.style.backgroundColor = color.Color;
}
})
}
})
},
@Viplav04
the problem is that onAfterRender is called only on actual table render, not on each cell render.
but there is much simpler solution.
check this
https://snippet.webix.com/qwn1j37n