Grid formatting

From pmusers
Jump to: navigation, search

Alternating colors in grid rows

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

Changing the grid's border

Grids have a blueish-grey line in the <div> around their perimeter:

GridBorderLines.png

This div, which uses the "pmdynaform-grid-tbody" and "pmdynaform-form" classes, has the following CSS:

.pmdynaform-grid-tbody {
    background-color: white;
    overflow: hidden;
    padding: 0px;
    -webkit-overflow-scrolling: touch;
}
.pmdynaform-form {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin-top: 1px;
    margin-right: auto;
    margin-bottom: 1px;
    margin-left: auto;
    background: #FFFFFF;
    background-color: rgb(255, 255, 255);
    padding: 5px 5px 5px 5px;
    font-size: 1em;
    font-family: "SourceSansPro", Arial, Tahoma, Verdana;
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #555151;
    border: 1px solid #DADADA;
}

The following JavaScript code can be added to a Dynaform to change the color of the grid border to a thicker dashed red line:

$("#gridID").find("div.pmdynaform-grid-tbody").css("border", "3px dashed red");

Where "gridID" is the grid's ID.

RedDashedLineAroundGrid.png

To not show the grid's border, use following JavaScript code:

$("#gridID").find("div.pmdynaform-grid-tbody").css("border", "0px");

To change the border color of all grids, edit the file workflow/public_html/lib/pmdynaform/build/css/PMDynaform.css and change from:

.pmdynaform-grid-tbody {
  background-color: white;
  overflow: hidden;
  padding: 0px;
  -webkit-overflow-scrolling: touch;
}

To:

.pmdynaform-grid-tbody {
  background-color: white;
  overflow: hidden;
  padding: 0px;
  -webkit-overflow-scrolling: touch;
  border: 3px dashed red; 
}

Then, delete your web browser's cache in order to see the changes in the CSS.

Another way to change the grid's border is to create a custom skin and add the following code to the skin's CSS file.

.pmdynaform-grid-tbody {
  border: 3px dashed red; 
}

Changing the grid's row separator lines

Grids have a blueish-gray lines between each row:

LinesBetweenGridRows.png

These lines are defined by the following CSS:

.pmdynaform-grid-row {
    border-bottom: 1px solid #e2e2e2;
    padding-top: 2px;
    position: relative;
}

These lines separating the rows can be changed by adding the following JavaScript code to the Dynaform:

$("#gridID").find("div.pmdynaform-grid-row").css("border-bottom", "1px dashed orange");

They can be hidden by using the following JavaScript code:

$("#gridID").find("div.pmdynaform-grid-row").css("border-bottom", "0px");

As explained in the previous section, edit the CSS files to change these lines in all Dynaforms.