Grid, rows render

[nico77Participant]

Good morning,
Is it possible apply the class name to all cells of a row in a grid based on the value of cell?

I try to explain better:
My grid has three columns, base on the value of the second columns I would pass that value how class name of cells, in order to provide the same background color for the entire row.
I tried:

var cellsClass = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                    return value;
                    }  ...
...

columns: [
                  { text: 'Tail', datafield: 'Tail', width: 100, cellclassname:cellsClass },
                  { text: 'Status', datafield: 'Status', width: 100, cellclassname:cellsClass},
                  { text: 'Driver', datafield: 'Driver', cellclassname:cellsClass }
                ]

In this way I only render the column that has the value of reference (Status). Is it possibile set with the value of “Status” all cells in a row?

Thanks in advance for every suggestions
Nicola

[Yavor DashevParticipant]

Hi nico77,

We have prepared a little code example on how to achieve this kind of functionality.
Note that I have used this demo for a base: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridcellclass.htm

These are the functions I used to set all the cells in the row depending on one column value:

            var cellclass = function (row, columnfield, value, defaulthtml) {
                
                if (value < 20) {
                    return 'red';
                }
                else if (value >= 20 && value < 50) {
                
                    return 'yellow';
                }
                else{
                    return 'green';
                        
                } 
            }

            var rowCellClass = function (row, columnfield, value, rowData ){
              
                if ( rowData.UnitsInStock < 20 ){
                    return 'red';
                }
                else if (rowData.UnitsInStock >= 20 && rowData.UnitsInStock < 50) {
                    return 'yellow';
                }
                else{
                    return 'green';  
                } 
               
            }

And this are the column settings:

 
columns: [
                  { text: 'Product Name', columngroup: 'Name', datafield: 'ProductName', cellclassname:rowCellClass, width: 250},
                  { text: 'Quantity per Unit', columngroup: 'Name', datafield: 'QuantityPerUnit',cellclassname:rowCellClass, cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellclassname:rowCellClass, cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellclassname: cellclass, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                ],

Let me know if that works for you!

Please, don’t hesitate to contact us if you have any questions!

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts