Advanced Field-level Grid Customization

Owned by Stratawise Support
Last updated: Dec 31, 2019
2 min read

On a field-by-field basis, there are a couple of advanced ways to customize the grid, both the filter row contents and the contents of the cells. These customizations are configured through the Grid tab of the Field property editor.

Instructions

To customize how a field is shown in the grid:

  1. For the field you wish to customize, navigate to its properties either through the Field List or a specific form.

  2. The Grid tab of the Field property editor is where you apply the customizations. Select the Grid tab.

  3. On the Grid tab, if the field is a Select list type field and it is desirable to show its options as a dropdown rather than a popup selector, check Dropdown filter list.

  4. Also on the Grid tab, the contents of the cell for this field can be customized leveraging a Custom Template and associated Custom JavaScript that can be invoked from the template. Below is an example that splits the contents of the field on semicolons by placing each portion of the split field value in its own <div>.

  5. After applying the customizations in the Grid tab, click Update on the Property editor, Save the form.

  6. To view the customizations, navigate to the respective Module’s grid view, refresh it to ensure the changes have been applied. You should now see the customizations applied.

 

 Simple Example

Column Template (HTML):
<div class="ui-grid-cell-contents" >
{{grid.appScope.executeCustomJs(grid, row, col)}}
</div>

Custom JavaScript:
var cellValue = grid.getCellValue(row, col);
return cellValue ;

 

Advanced Example (Line break)

Column Template (HTML):

<div class="ui-grid-cell-contents" >
<div ng-repeat="role in grid.appScope.executeCustomJs(grid, row, col)">
{{role}}
</div>
</div>

Custom JavaScript:

var cellValue = grid.getCellValue(row, col);
if (cellValue) {
return cellValue.split(';');
}
return undefined;

 

Note: It may be desirable to use the Drop-down filter list option for very short Select Lists where the user will only filter on one value at a time.

Related articles