Column Template: It is a template for a particular column in a widget (grid).
For the column template the dynamic variable that is available is tplData. This variable is used to get the current cell value from the associated record.
A sample screen shot is shown here for reference:
The following code snippet is the Column Template configuration for the Beneficiary Details widget with the dynamic variable:
{{ #if tplData }}
<input
data-input = 'true'
type = 'text'
value = {{ tplData }}
data-column-id = 'BENE_ID'
data-single-click = 'true'
>
{{ /if }}
<!-- tplData is the dynamic variable provided by Canvas for Column Template. -->
<!-- BENE_ID is the Reference Number column's ID in the Beneficiary Details widget --> |
Row Template: It is a template for a row in a widget (grid) and applies to all the other rows in a widget.
The following dynamic variables are available in Canvas to configure a row template:
- COL_ID: ID for the column.
- COL_NAME: Display name of the column.
- VALUE: Cell value of the column ID.
- VISIBLE_IND: This must be ‘Y’ for the column. Else, the column is hidden and can only be accessed by expanding the row.
- colIndex: Identification number of the column. For example, 1, 2, 3 and so on.
- cssClass: The class specifies whether the column is hidden or visible and the styles that are applied. For examples, integers are aligned to the right and string to the left.
- key: Same as row index.
- rowIndex: Identification number of the row. For example, 1, 2, 3 and so on.
- totalRecords: Total number of records that are to be displayed.
A sample screen shot is shown here for reference:
The following code snippet is the row template configuration for the Deposit Summary widget. The configuration uses some of the dynamic variables that are available in Canvas:
<div
class = 'col-lg-6'
style = 'border: 1px solid #ccc;'
>
<input
type = 'checkbox'
data-input = "true">
{{ #each record }}
<div
class = "{{ this.cssClass }} text-center"
data-item-id = "ct-tpl-record"
data-item-data = "{{ this.COL_INDEX }}"
data-row-index = "{{ this.rowIndex }}"
data-single-click = 'true'
data-column-id = '{{ this.COL_ID }}'
data-context-click = 'true'>
<b> {{{ this.COL_NAME }}}: {{{ this.VALUE }}} </b>
</div>
{{ /each }}
</div> |