Shading and Dividers PropertiesCondtional style (client-side)
Description
Applies custom CSS styling to rows in the Grid that match a Condition. The Condition is computed on the client.
Discussion
You can use the Conditional style property to set conditional styles for rows in the Grid. This property can be used to call out data in the Grid that requires special attention. For example, this property could be used to highlight overdue invoices or client jobs that are not assigned to an employee.
If the conditional expression evaluates to true, the styling is applied to the Grid row. If multiple expressions evaluate to true for a row, the first expression is applied.
The conditional expressions can refer to values in the Grid row, summary values, and special system fields. Field names can be inserted using the Insert Fieldname link. Insert Function can be used to insert a function from a list of functions available for use in the server-side computation.
The Conditional style (client-side) is evaluated on the client after data for the Grid is downloaded.
Syntax
The Conditional style (client-side) expressions are written using a specific syntax:
- Only functions shown in the Insert Function... list and user-defined JavaScript functions can be used (see below for more info about User-defined JavaScript Functions).
- String literals are defined using single quotes.
- Logical operators are and, or, and not.
- String comparisons are case-sensitive. Use a function like lower() to create string comparisons where case doesn't matter.
quantity > 100 and quantity < 200
state = 'MA'
lower(city) = lower('Boston')System Fields
Several system fields are available for use in your expressions. Some system fields may not be available in your Grid. For example, if a Grid does not have a Detail View, the Detail View system fields cannot be used.
Available system fields include:
- System Field
- Description
- data.rowNumber
The row number of the current record in the Grid
- grid.rowState
The row's state. grid.rowState can have a value of "view", "change", or "enter".
- grid.isRowDirty
A true/false value indicating whether or not the Grid row is dirty.
- grid.isDirty
A true/false value indicating whether or not the Grid is dirty.
- grid.recordsInGrid
The number of records in the Grid.
- grid.pageNumber
If the Grid has multiple pages, the current page number.
- grid.pagesInGrid
The number of pages in the Grid.
- grid.logicalRecordNumber
The Grid row's logical record number.
- grid.hasDetailView
A true/false value indicating whether or not the Grid has a Detail View.
- grid.isOnFirstPage
A true/false value indicating whether or not the first page of records is being shown.
- grid.isOnLastPage
A true/false value indicating whether or not the last page of records is being shown.
- grid.hasNextPage
A true/false value indicating whether or not the user can navigate forward to the next page of records.
- grid.hasPrevPage
A true/false value indicating whether or not the user can navigate backward to the previous page of records.
- grid.isNewRecordRow
A true/false value indicating whether or not the row is a New Record.
- grid.checkedRowCount
The number of checked rows.
- grid.rowIsChecked
A true/false value indicating whether or not the Grid row is checked.
- detailView.isDirty
A true/false value indicating whether or not the Detail View is dirty (has been edited).
- detailView.rowState
The row's state for the record shown in the Detail View. detailView.rowState can have a value of "view", "change", or "enter".
- detailView.isOnFirstRecord
A true/false value indicating whether or not the Detail View is displaying the first record.
- detailView.isOnLastRecord
A true/false value indicating whether or not the Detail View is displaying the last record.
- detailView.hasNextRecord
A true/false value indicating whether or not the user can navigate forward to the next record in the Grid.
- detailView.hasPrevRecord
A true/false value indicating whether or not the user can navigate backward to the previous record in the Grid.
- detailView.mode
The Detail View mode.
Using Summary Values
If a field has a summary value calculation, the summary value can be referenced in the expression using the syntax:
summary.fieldname.summary_type
where fieldname is the field's name and summary_type is the type of summary calculation. For example, if you have enabled Average for a field called quantity, the summary value is referenced as:
summary.quantity.average
If the field name contains a space (e.g. "quantity ordered"), the space is replaced with an underscore:
summary.quantity_ordered.average
See Summary Values to learn how to enable summary values for a field.
User-defined JavaScript Functions
In addition to the functions listed in Insert Function..., you can write your own JavaScript functions to use in the conditional expression. To define your own JavaScript function, go to the Javascript Functions pane and define the JavaScript function you'd like to use. This function can include arguments populated from fields in the conditional expression.
For example, assume you have three fields in the Grid row that you'd like to use in your JavaScript function in an expression: 'field1', 'field2', and 'field3'. The expression could be written as:
myCustomFunction(field1, field2, field3)
where myCustomFunction is the name of your JavaScript function defined in the Javascript Functions pane.
function myCustomFunction(field1, field2, field3) {
// Code that performs the evaluation and stores
// the computation in a variable called result
return result; // result is a variable with a true or false value
}The JavaScript function must return a value. If the function is used to compute the whole expression, the JavaScript function must return a true or false value. Otherwise, the return value must be used in a conditional expression that evaluates to true or false.