jsgrid Report Part
Description
The jsgrid part is predominantly a form-oriented node you can use to collect multiple pieces of data for a range of categories. In addition, it can be used to neatly present the results of a collection as a report part. It is especially useful for the simple presentation of arrays in the LogicNets Assessment Framework.
This article is limited to the features of the jsgrid part that can be used for reporting features. See the article called jsgrid for information on using jsgrid as a form part node.
Example
Click here to access a sample project that includes the js grid report part.
Use
For any multi-dimensional array, you can use this part to present multiple elements in tabular style. The parameter settings allow for a title, column headers with interpolation (i.e., you can use $(...) to incorporate modeled variables in the title), and column sorting. You can manually style the grid using CSS.
IMPORTANT: note that the jsgrid part will not be visible on a PDF due to the way it is rendered. Instead, use a report-item node to present a collection in tabular form (utilizing the value template feature of that part).
Editor Fields
| Tab |
Field Name |
Description |
Type/Options |
Optional/Mandatory |
| Basic |
Collection |
This is where you specify the path of the variable that contains the array to be shown in the table. |
Data Object |
Mandatory |
| Basic |
Grid Caption |
Enter a title for the table here. This can include $(..) constructions. |
Text |
Mandatory |
| Basic - columns |
Name |
This is where you enter a variable name from those defined in the collection. |
Data Object |
Mandatory |
| Basic - columns |
Title |
Enter the title for the column here. This can include $(...) constructions. |
Text |
Mandatory |
| Basic - columns | Type | In this field, choose the variable type from the dropdown menu. | Text | Number | Mandatory |
| Basic - columns | Width | In this field you can specify a width for any/all columns in percentage or pixel terms. Any columns without a predetermined width share the remaining width equally. | [percent %] | [pixels px] | Optional |
| Basic | Allow column sorting | Check this box to allow the user to sort on any column by clicking the title. | Yes | No | Optional |
| Basic | Allow column resizing | Check this box to allow the user to drag and drop column separators to expand or collapse the width of any selected column. | Yes | No | Optional |
| Basic | Use paging | Check this box to limit total number of rows shown on the screen. Subsequent rows are shown when the user selects a different page via a dropdown menu. | Yes | No | Optional |
Example of a Completed Part Editor
