Setting the background colour for one specific row

[jmaraisParticipant]

As far as I can determine it seems that it is not possible to set the background colour of a specific to row to a different colour than the rest of the rows.

I have tried something like:

$("#row2Grid").css('bacground-color','yellow');

but it seems that it is not working.

I just want to know whether that is the case, so that I do not spend time on something that is not possible.

[Peter StoevKeymaster]

Hi Johan,

In order to customize the rendering of Grid cells, use the cellsrenderer callback function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jmaraisParticipant]

Yes, I use it on a regular basis but it seems that you cannot set the background of the whole cell by using that. It sets the contents of the cell but not the background of the whole cell. You need to be able to set the background of the main div which renders the cell and it seems to me doing that is not possible.

[Peter StoevKeymaster]

Hi Johan,

You can set the background of the cell, too.

           columns: [
                  {
                      text: 'First Name', datafield: 'firstname', width: 90, cellsrenderer: function (row, cell, value) {
                          return '<div style="background: blue; color: white; width: 100%; height: 100%;"><span style="margin: 4px;">' + value + '</span></div>';
                      }
                  },
                  { text: 'Last Name', datafield: 'lastname', width: 90 },
                  { text: 'Product', datafield: 'productname', width: 177 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', align: 'right', cellsformat: 'c2' }
  

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jmaraisParticipant]

Thank you! That was helpful.

It is the additional div with the width and height of 100% that does the trick.

[Author]

Posts