GraffitiGridColumn

Enumerations #

Constants #

Events #

Methods #

Properties #

Examples #

Styling #

To style the header, you can make use of GraffitiStyles to achieve the desired effect. To center text in the column header, you can use the following:

  var gridColumnCenter as GraffitiStyle = GraffitiStyle.Create( Session, "gridColumnCenter", "text-align:center;justify-content:center" )
  myColumn.HeaderStyle = gridColumnCenter

To style all of the row cells in a column, you can assign the gridColumnCenter object as defined above to the Style property of the column:

  myColumn.Style = gridColumnCenter

One important note is that row cells use flexbox. This means that you’ll need to use the justify-content CSS attribute to center text, and other changes may need flexbox-specific attributes.

To right-align text in cells, you’ll need to use the flex-end value of the justify-content CSS attribute, like so:

  var gridColumnRight as GraffitiStyle = GraffitiStyle.Create( Session, "gridColumnRight", "text-align:right;justify-content:flex-end" )

Sorter Method #

The Sorter property allows implementation of a custom JavaScript sort function that is executed client-side. Note that errors in the JavaScript code supplied may cause Grid instances to fail to load or behave erratically. Below is an example of a functional JavaScript sort function for sorting integers, and is used within GraffitiGrid:

  function(direction, columnId, firstRow, secondRow) {
 
    '// direction is the integer direction of the sort. -1 for descending, 1 for ascending.
    '   columnId is the string column ID that is being sorted.
    '   firstRow is the JavaScript object containing the data for the first row in the comparison.
    '   secondRow is JavaScript object containing the data for the second row in the comparison.
 
    var x = (isNaN(firstRow[columnId]) || firstRow[columnId] === '' || firstRow[columnId] === null) ? -99e+10 : parseFloat(firstRow[columnId]);
    var y = (isNaN(secondRow[columnId]) || secondRow[columnId] === '' || secondRow[columnId] === null) ? -99e+10 : parseFloat(secondRow[columnId]);
    return direction * (x === y ? 0 : (x > y ? 1 : -1));
  }

You would store this in a string constant or variable and assign it to your GraffitiGridColumn’s Sorter property.