Datatable style: Font turns white

Hi,
I have set the following style

' .highlight{background-color:#FFAAAA;} '

I have applied the style for a row in a Datatable. However, the focused cell value turns White instead of remaining Black making it very faint.

with Regards
Ashok

Comments

  • Can you share a full code snippet ?

  • edited July 2018

    Hi,
    The idea is to paint the row pink where the column sResult = 'Not Ok'. Apart from the font color, the below code is not working though. Your help is appreciated.

         webix.ui({
                 container:divid,
                 view:'datatable',
                 id:'wbxInspAttrDataTable',
                 header:true,
                 headerRowHeight:24,
                 editable:true,
                 editaction:'custom', //invoke the editor through hotkeys
    //             editaction:'dblclick', //invoke the editor through hotkeys
                 scheme:{
                          $change:function(item){
                                  if (item.sResult == 'Not OK')
                                      item.$css = "highlight";  //inserted in ProjectModule Body
                          }
                 },
                 columns:[
                         { id:'Sno',  header:['S.No.'],width:40,css:{'text-align':'right'}},
                         { id:'sDeMeritWts', header:['Weight'],width:60,css:{'text-align':'right'}},
                         { id:'sAttrNames', header:['Attribute'],width:200},
                         { id:'sLotSize', header:['Lot Size'],width:85,css:{'text-align':'right'},editor:"text"},
                         { id:'sEditLS', header:['Edit'],width:50,template:"<input class='edtbtn' type='button' value='...'>"},
                         { id:'sSampleSize', header:['Sample Size'],width:85,css:{'text-align':'right'},editor:"text"},
                         { id:'sNcus', header:['NCUs/NCs'],width:85,css:{'text-align':'right'},editor:"text"},
                         { id:'sPenaltyPoints', header:['Penalty Points'],width:85,css:{'text-align':'right'}},
                         { id:'sResult', header:['Result'],width:85},
                         { id:'sIDs', header:['Attr id'],width:85,css:{'text-align':'right'}},
                         { id:'sAQLs', header:['Aql'],width:85,css:{'text-align':'right'}},
                         { id:'sInspLevels', header:['Insp Level'],width:85}
                 ],
                 autoConfig:true,   //required for navigation
    //             height:105,
    //             width:750,
                 rowHeight:24,
                 scrollX:false,
                 scrollY:true,
                 select:'cell',
                 multiselect:true,
                 blockselect: true,
                 clipboard:'selection',
                 on:{
                    onBeforeSelect:function(id){
                      if ((id.column == 'Sno') || (id.column == 'sAttrNames') || (id.column == 'sResult') || (id.column == 'sDeMeritWts') || (id.column == 'sPenaltyPoints'))
                         return false;
                    }
                  },
                on:{
                   onAfterEditStop:function(state,editor,ignoreUpdate){
                      var rowid = this.getItem(editor.row);
                      if (rowid.sNcus > rowid.sSampleSize)
                         rowid.sResult = 'Not Ok';
                      this.updateItem(rowid.id); //repaint and save
                      this.validate();
                   }
    
                },
                // navigation:true,
                 rules:{
                    'sLotSize':function(value){return value > 0;},
                    'sSampleSize':function(value){return value > 0;},
                    'sNcus':function(value){return value > 0;},
                    'sPenaltyPoints':function(value){return value > 0;}
                 },
     //            onAfterEditStop:function(){this.validate();},
                 //ready: validate(),
    
                 data: series
             });
    

    *)
    //----------------------------------------------------------------------------------------------

  • You can force your own color in the above case through a bit more complex css rule
    http://webix.com/snippet/ebd54d7b

  • edited July 2014

    Hi,

    The thing is that selection font color is white by default. To change it, you should redefine some CSS rules for datatable.

    Please, check the code http://webix.com/snippet/fcbcd8c8 and try editing "sNcus" column there.

  • Thank you. My validation rules themselves are highlighting the entire row. Can they highlight just the cell? Also, for defining the styles, is there an alternative in javascript instead of html code? I am having difficulty in doing so in my front end (Morfik).

    with Regards
    Ashok

  • edited July 2014

    To apply cell styling two ways are possible:

    1. define cssFormat function for the column:
    function mark_result(value, obj){
        if(value==='Not Ok') 
          return 'highlight';
    }
    ....
    columns:[
       { id:'sResult', header:['Result'],width:85, /*cssFormat:mark_result*/}, 
    ]
    
    1. Make use of addCellCss and removeCellCss methods:
     $change:function(item){ 
        if (item.sResult === 'Not Ok'){
          $$('wbxInspAttrDataTable').addCellCss(item.id, "sResult", "highlight");
         }else {
          $$('wbxInspAttrDataTable').removeCellCss(item.id, "sResult", "highlight");
         }
     } 
    

    http://webix.com/snippet/b28d6b1c

    Cell css can be added in a js code, but only if you provide this value with the data. Look up the sample for details.

  • Thank you. I will see how to work this out.

    with Regds
    Ashok

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!