Set background color of entire row (add css class) depending upon cell data

[sdongol]

First of all this is a very nice powerful plugin, I just switched to paramquery grid very recently. One of my requirement is to highlight the entire row with different color background with cell data when the table is displayed.

For example

Col  A  |  Col  B  | Direction
---------------------------------
abc     |  xyz      | In          -> Set background color of entire row with green color
abc     |  xyz      | In          -> Set background color of entire row with green color
abc     |  xyz      | In          -> Set background color of entire row with green color
abc     |  xyz      | Out        -> Set background color of entire row with red color
abc     |  xyz      | Out        -> Set background color of entire row with red color


is it possible to do with param-query grid ?

- Thanks

[[email protected]]

The way I did it was to add a boolean property to my model. I hid this col from view. On the create event I looped through the data model and evaluated the boolean property. In cases where this was true I added the row to the selection set.

Code: [Select]

var obj = $.paramquery.tableToArray(tbl);
var pqObj = {
colModel = obj.colModel,
dataModel = obj.daaModel,
create: function (evt, ui) {
$.each(ui.data, function (i, d) {
if (d[5] == 'True') {
$('#gridTable').pqGrid('setSelection', { rowIndx: i });
                }
});
}
}
}
// hide the IsChanged column
$.extend(pq.colModel[5], { hidden: true });
$('gridTable').pqGrid(pqObj);
Happy coding.

[paramvir]

Another way to do is

1) Identify the rows which you want highlighted during refresh event. Use jquery DOM traversing API to find those rows.

2) Assign the class to those rows.


There is an easy to use API to assign classes to rows and cells in ParamQuery Pro.

http://paramquery.com/pro/demos/row_styles

[paramvir]

There is a new and easier way in v3.2.0 to add conditional styles to rows and cells

http://paramquery.com/pro/demos/condition_style

[jevin]

in this case http://paramquery.com/pro/demos/condition_style

after rows color is changed
on rows that color changed

working hi-lighting selecting by cell

Code: [Select]

selectionModel: { type: 'cell'}
but no working hi-lighting selecting by rows

Code: [Select]

selectionModel: { type: 'row'}       

[paramvir]

The priority of css rules is decided by specificity of css rules. The inline css rules have higher specificity than css class based rules.

If you want to show highlight of rows when both conditional rule and row is selection, then lower the specificity of conditional rule by injecting a class instead of inline style.

[ricuzzo]

You can use Jquery once the grid has been rendered (grid = $('#myGrid')):

<script>

      grid.on( "pqgridrefresh", function( event, ui ) {
         $(".pq-grid-row").each(function( index ) {
            var rowData = grid.pqGrid( "getRowData", {rowIndxPage: index} );
            if(rowData.expiredDate){//if there exists and expiredDate, paint that row in red
               //alert("fila de baja:"+index)
               $(this).removeClass('pq-grid-oddRow');
               $(this).removeClass('pq-grid-row');
               $(this).addClass('redRow');            
            }
         });   
      
      } );
</script>