different row color

[pwenkParticipant]

Hello,

im using jqxgrid to build an alarmlist display. The rows must have different foreground and background colors depending on the state of the alarm. I have injected the color information as hidden columns in the row. Then i tried to inject the color information with help of the cellsrender function with the result, that the text itself ist colored exactle as i want, but not the rest of the column field.

how can i set the foreground and background color of the complete row ?

Best Regards,

Peter Wenk

[Peter StoevKeymaster]

Hi Peter,

It is possible to change the rendering of a cell by using the cellsrenderer function.

To change the background color of a cell you can use a code like this:

$("#jqxgrid").jqxGrid(
{
    width: 670,
    source: dataAdapter,
    theme: theme,
    columnsresize: true,
    columns: [
        { text: 'First Name', dataField: 'firstname', cellsrenderer: function (row, column, value) {
            return '<div style="background: #aabbcc; width: 100%; height: 100%;">' + value + '</div>';
        }, width: 100
        },
        { text: 'Last Name', dataField: 'lastname', width: 100 },
        { text: 'Product', dataField: 'productname', width: 180 },
        { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
    ]
});

I suppose that in your scenario, you will need to add a cellsrenderer function to all of your Grid columns, as there’s no way to add a custom background color to a specific grid row.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Christophe OpoixParticipant]

For reference, you can access to other elements of the row with :

this.owner.source.records[row]['datafield']

The cellsrenderer function should look like this :

var cellsrenderer = function (row, column, value) {
    var color = this.owner.source.records[row]['color'];
    if (color) {
        return '<div style="background: ' + color + '; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">' + value + '</div>';
    } else {
        return '<div style="overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">' + value + '</div>';
    }
}

[Author]

Posts