Webix combo dropdown list items bind background color to cell values

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.

Comments

  • 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;
    },

  • edited August 18

    @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:
    https://snippet.webix.com/kylc6ej8
    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.

  • @annazankevich

    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;
    
    
  • edited August 21

    @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}));
        }
    }
    

    https://snippet.webix.com/dh94z3k0

  • edited August 21

    @intregal

    It says cssCache not defined.
    Sorry i forgot to define it

  • @intregal

    Thank you it works!

  • Hi @intregal

    I also tried it this way:https://snippet.webix.com/grjged2e
    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

  • edited August 26

    @intregal

    This snippet does not show the colors.
    But I tried it and works.
    Thank you

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!