Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JqxGrid: Change color of row based on value of column

I referred few answer from this forum http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsrendering.htm http://www.jqwidgets.com/community/topic/change-row-color-of-gridview/

Both are done using the cellrendered event of a cell and it can be applied to same cell. How do I get the value of one cell to change the colour of a different cell?

Or is there a method to change the background colour of the entire row? Below is the code I'm using to change the colour of same cell.

var cellsrenderer = function(row, column, value, defaultHtml) {
                var element = $(defaultHtml);
                element.css({ 'background-color': '#' + value });
                return element[0].outerHTML;
            return defaultHtml;

$("#jqxgrid").jqxGrid({
            width: 1100,
            autorowheight: true,
            autoheight: true,
            source: dataAdapter,
            theme: 'classic',
            columns: [
            { text: 'Job Number', dataField: 'jobNum' },
            { text: 'Project Name', dataField: 'ProjName' },
            { text: 'Hours', dataField: 'hrssum' },
            { text: 'Project Type', dataField: 'Suffix' },
            { text: 'color name', dataField: 'colorname', cellsrenderer: cellsrenderer }
            ]
        });
        }
like image 554
prvn Avatar asked May 13 '13 15:05

prvn


1 Answers

There are 2 more parameters in the cellsrenderer that are passed by the jQWidgets Grid.

var cellsrenderer = function(row, column, value, defaultHtml, columnSettings, rowData) {

}

The last parameter - rowData is a JSON object which contains the rendered row values. So if you have a column with datafield = firstname, you can write:

var firstName = rowData.firstname;

like image 129
scripto Avatar answered Sep 23 '22 13:09

scripto