Column Renderers and Formats
Types of column renderers available for use in the grid widgets are listed in the table that follows, along with their corresponding formats and some other notes.
|
Renderer Type
|
Formats
|
Notes
|
||
|---|---|---|---|---|
|
Default
|
N/A
|
Renders the data as a string when possible.
|
||
|
Number
|
Select or enter a string containing the format to use.
|
JSON configuration service – Formats support both % and $
Mashup builder – formats only support $.
Both support decimals.
|
||
|
Long
|
Select or enter a string containing the format to use.
|
JSON configuration service – Formats support both % and $
Mashup builder – Formats only support $.
Both support decimals.
|
||
|
HTML
|
• raw – The actual HTML is displayed in the grid cell.
• format – The HTML is encoded, XSS sanitized, and interpreted by the browser for display.
• unsanitized – The HTML is encoded but is NOT XSS sanitized before it is interpreted by the browser for display.
|
The format options listed in the column to the left are for JSON use. In the Mashup Builder, these options are labeled:
• Raw (no formatting)
• With Formatting
• With Formatting, Unsanitized (not-secure)
|
||
|
Hyperlink
|
• _blank – The navigation target is a new window or browser tab (depending on the browser).
• _self – The navigation target is the current window or tab.
• _parent – The navigation target is the parent of the iframe.
• _top – The navigation target is the top frame.
|
When selecting hyperlink renderer, a Link Text column is also available. Enter the text to be displayed by the link.
The following is a JSON example for configuring a hyperlink column:
“columnFormatter”: {
“type”: “hyperlink”,
“format”: “_blank”,
“params”: {
“textFormat”: “Click here!”
}
}
|
||
|
Imagelink
|
• image – Displays the image at its actual size.
• scaledtowidth – Scales the image to fit the column width.
• scaledtoheight – Scales the image to fit the row height.
• hyperlink – Displays a link to click, to view the image.
|
|||
|
String
|
• full – Displays the entire text string.
• notext – Displays no text.
• limitN – Limits the display of text to the first N characters. Limits are usually unnecessary when using data overflow options.
|
|||
|
Boolean
|
• checkbox – Displays a view-only checkbox in the grid cell.
• text – Displays text options such as true or false.
• notext – Displays no data. Use for state formatting only.
|
|||
|
Datetime
|
Follow the links on the right for more information about using the momentjs and jdate formats.
|
For more information, see the following:
|
||
|
Integer
|
Select or enter a string containing the format to use.
|
JSON configuration service – formats support both % and $
Mashup builder – formats only support $.
Integer does not support decimals.
|
||
|
Location
|
Select or enter a string containing the latitude, longitude, or elevation format to identify a location. The format string can be used to truncate the precision of the latitude/longitude/elevation values. When truncated, the values are rounded up. If no elevation value is included, it will be omitted from the output string.
|
An icon can be displayed with the location by using a state definition. Configure the state to define when to show the icon, depending on the value of the location string.
The following is a JSON example for configuring a location column:
“columnFormatter”: {
“type”: “location”,
“format”: “0.000000”,
}
}
|
 |
• The Advanced Grid and Advanced Tree Grid list can render and edit Image, ThingCode, Vec2, Vec3, Vec4, and Infotable basetypes at runtime.
• Rendering with dynamic data shapes is supported when you provide dynamic configuration. When data in Advanced Grid is populated using dynamic data shapes, provide configuration at runtime to render the values as expected. Configuration acan be provided using a service that is bound to Configuration of Advanced Grid. This service is like the one which provides data based on data shape name.
|