ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: lgauton on March 09, 2015, 08:01:59 pm

Title: Set rows to different background colour's for rows based on grid column value
Post by: lgauton on March 09, 2015, 08:01:59 pm

Hi I'm using v2.3.0, and want to dynamically set the row background colour based on a column value, with remote data I thought it would be possible to do something like

                    load: function (evt, ui) {
                        var $grid = $(this).closest('.pq-grid');

                        $.each(ui.data, function (i, d) {
                            if (d[2] == 'true') {
                                $grid.pqGrid("addClass", { rowIndx: i, cls: 'pq-red' });
                            }
                        });

                    },

But this doesn't work

Can you give some pointers please

Also I see v2.4.0 requires renewal - do you have a renewal price or is it a new purchase that's required

Title: Re: Set rows to different background colour's for rows based on grid column value
Post by: paramvir on March 10, 2015, 12:32:33 am

ui.data is not an option in load event/callback.

That would be

Code: [Select]

load: function(evt, ui){
var $grid = $(this),
data = $grid.pqGrid('option','dataModel.data');

$.each(data, function (i, rowData) {
if (some condition on rowData ) {
$grid.pqGrid("addClass", { rowIndx: i, cls: 'pq-red' });
}
});
}



Subscription renewal details/discounts are mentioned at bottom of download page.
http://paramquery.com/pro/download

Title: Re: Set rows to different background colour's for rows based on grid column value
Post by: lgauton on March 10, 2015, 03:41:41 pm

Hi Thanks for the guide - I can see that the rows are now traversed but class is not added to row, my code is

                    load: function(evt, ui){
                        var $grid = $(this),
                            data = $grid.pqGrid('option','dataModel.data');

                        $.each(data, function (i, rowData) {
                            if (rowData[2] == "true") {
                               
                                $grid.pqGrid("addClass", { rowIndx: i, cls: "pq-red" });
                               
                            }
                        });
                       
                    },

Title: Re: Set rows to different background colour's for rows based on grid column value
Post by: paramvir on March 10, 2015, 04:24:44 pm

The class is indeed added to the row, if you check it with DOM inspector.
If you want to add some styles to row based on class, then add css rules to class.

tr.pq-red td
{
    background:red;
}