ParamQuery grid support forum

General Category => Help for ParamQuery Grid (free version) => Topic started by: sdongol on August 01, 2013, 08:57:43 pm

Title: Set background color of entire row (add css class) depending upon cell data
Post by: sdongol on August 01, 2013, 08:57:43 pm

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

Title: Re: Set background color of entire row (add css class) depending upon cell data
Post by: srailsback@gmail.com on August 02, 2013, 03:47:05 am

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.

Title: Re: Set background color of entire row (add css class) depending upon cell data
Post by: paramvir on August 02, 2013, 10:21:17 pm

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

Title: Re: Set background color of entire row (add css class) depending upon cell data
Post by: paramvir on October 24, 2015, 10:54:16 am

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

Title: Re: Set background color of entire row (add css class) depending upon cell data
Post by: jevin on December 05, 2015, 10:52:13 am

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'}       

Title: Re: Set background color of entire row (add css class) depending upon cell data
Post by: paramvir on December 08, 2015, 05:00:22 pm

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.

Title: Re: Set background color of entire row (add css class) depending upon cell data
Post by: ricuzzo on October 03, 2017, 12:11:27 pm

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>