Alternating row colors in grid

From pmusers
Jump to: navigation, search

The background color of grid rows can be changed by editing the CSS class definition of .pmdynaform-grid-row in the file workflow/public_html/lib/pmdynaform/build/css/PMDynaform.css (or by adding a css/PMDynaform.css file to your skin).

However, JavaScript needs to be used if setting alternating background colors in the grid rows. jQuery's :odd and :even selectors can be used to select alternating rows, and then the css() method is used to set the "background-color" property.

Add the following JavaScript code to the Dynaform:

//function to set alternating colors in the grid rows:
function setRowColors() {
  $("#productList").find("div.pmdynaform-grid-row:even").css("background-color", "#e9f7ef");  //light-blue
  $("#productList").find("div.pmdynaform-grid-row:odd").css("background-color", "");  //default color, which is white
}

//When the Dynaform loads, set the background color for the existing rows
setRowColors();

//When a new row is added, reset the backgound color
$("#productList").onAddRow (function(oGrid, aRow, rowIndex) {
   setRowColors();
})

//when a row is deleted, reset the background color                       
$("#productList").onDeleteRow (function(oGrid, aRow, rowIndex) {
   setRowColors();
})

Where "productList" is the ID of the grid.

When the grid is displayed, the rows will alternate between light blue and white, which makes it easier to read the values in the grid.

AlternatingRowColorsInGrid.png