Datatable style: Font turns white

Webix JS
#1

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

#2

Can you share a full code snippet ?

#3

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

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

#4

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

#5

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.

#6

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

#7

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.

#8

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

with Regds
Ashok