Skip to main content
G
GAjey10-Marble
10-Marble
July 20, 2021
Question

"Advanced Grid" custom configuration by json not working

  • July 20, 2021
  • 1 reply
  • 3769 views

Hi

I'm trying to use custom configuration made using json provided to grid advance widget. But, I'm not able to achieve what I want.

I want to make only few columns of table to editable

state formatting to columns according to the value

following is the json I'm trying.

please help to know what wrong I'm doing.

Also can anywhere I can get reference format for configuration json.

 

var configuration = {
"cellEditingEnabled": false,
"columns": { // Required
"idFieldName": "id", // {string} Required. The name of the 'id' column containing the primary key.
"header": { // Optional
"titleCase": "", // *{string} header title case setting. Options: 'lower', 'upper', 'camel'
"overflow": "wrapped" // *{string} header overflow setting. Options: 'fitted', 'wrapped', 'clipped', 'ellipsis', 'tooltip'
},
"columnDefs": [ // Optional
{
"targets": 0, // {integer} the index of the column to which this data applies.
"fieldName": "id", // {string} the data field name.
"title": "ID", // *{string} the column display name.
"width": "*", // *{string} the column width in px. Options: '*' (auto-width) or a number.
"autoWidth": true, // *{boolean} enables auto width e.g. '*' setting above.
"overflow": "wrapped", // *{string} cell overflow setting. Options: 'fitted', 'wrapped', 'clipped', 'ellipsis', 'tooltip'
"headerTextAlignment": "center", // *{string} header text alignment. Options: 'left', 'right', 'center'.
"textAlignment": "left", // *{string} cell text alignment. Options: 'left', 'right', 'center'.
"hidden": false, // *{boolean} hide column. If context menu is enabled, end-user can unhide column. Data of this column will be available for state formatting.
"inLayout": true,
"columnFormatter": {
"type": "number",
"format": "0"
}

},
{
"targets": 1,
"fieldName": "cellJuice",
"title": "Cell Juice",
"width": "*",
"autoWidth": true,
"overflow": "wrapped",
"headerTextAlignment": "center",
"textAlignment": "left",
"hidden": false,
"inLayout": true,
"description": "....",
"columnFormatter": { // Optional
"type": "number", // {string} the column renderer to use for formatting the column value. Options: 'string', 'number', 'long', 'boolean', 'html', 'hyperlink', 'imagelink', 'default'.
"format": "0.00", // {string} format string based on the type of renderer. See Mashup builder UI for format strings per renderer.
"cellEditor": { // optional: defines cell-editing options for this column
"enabled": true, // *{boolean} to indicate whether cell editing is enable for this column
},
"stateDefinition": { // Optional
"name": "SimpleAlarm", // {string} name of this state definition.
"type": "non-fixed", // {string} type of state definition. Options 'fixed', 'not-fixed'.
"fieldName": "cellJuice", // {string} the column fieldName that drives this state-definition.
"states": [ // Required.
{
"name": "Lo", // {string} the name of the state
"value": 60, // {*} the value of the state that needs to match the fieldName value.
"comparator": "<", // {string} the comparator. Options: '==', '<', '>', '<=', '>=', '!='
"styleName": "DefaultChartStyle15" // {string} the name of the style to apply from the list of styles below when state matches.
}

]
}
}
},
{
"targets": 2,
"fieldName": "cossettes",
"title": "cossettes",
"width": "*",
"autoWidth": true,
"overflow": "ellipsis",
"headerTextAlignment": "center",
"textAlignment": "left",
"hidden": false,
"inLayout": true,
"description": "....",
"columnFormatter": {
"type": "number",
"format": "0.00"
}
}
],
"enableSorting": true, // Optional. Enable sorting capabilities for the grid.
"multiColumnSortOrder": [ // Optional. Sorts grid by multiple columns. The most prominent column is listed last.
{
id: 'id', // {string} column 'fieldName'
direction: 'asc' // {string} direction of the sort, e.g. ascending or descending. Options: 'asc', 'des'
},
{
id: 'office',
direction: 'asc'
},
{
id: 'title',
direction: 'des'
}
]
},
"rows": { // Optional
"selection": "multi", // *{string} row selection setting. Options: 'none, 'single', 'multi'
"defaultSelectedRows": "1,3", // *{string} default row selection setting starting with row 1. Options: '1', '1,2,3', '1-5,10'
"minHeight": "30", // {string} row height setting in px.
"rowFormatter": { // Optional. Format entire row based on a fixed style or state definition.
"type": "number",
"format": "0"

//"stateDefinition": { // Required
// "name": "SimpleAlarm", // {string} name of the state definition.
// "fieldName": "cossettes", // {string} name of the column data field.
// "type": "not-fixed", // {string} type of state definition. Options 'fixed', 'not-fixed'.
// "states": [ // Required
// {
// "name": "Lo", // {string} the name of the state
// "value": 25, // {*} the value of the state that needs to match the fieldName value.
// "comparator": "==", // {string} the comparator. Options: '==', '<', '>', '<=', '>=', '!='
// "styleName": "DefaultChartStyle15" // {string} the name of the style to apply from the list of styles below when state matches.
// }
// ]
// }
}
},

// "styles": { // Optional unless styles are defined in state formatters
// "tableWrapperStyle": { // {string} name of the style.
// "backgroundColor": "#e6e6e6", // {string} the background style color
// "secondaryBackgroundColor": "", // {string} the secondary background style color for a gradient.
// "foregroundColor": "", // {string} the font color.
// "textDecoration": "", // {string} text decoration settings. Options: 'underline', 'line-through', 'overline'
// "image": "", // {string} MediaEntity url
// "lineColor": "#b3b3b3", // {string} the color of the cell outline.
// "borderStyle": "solid", // {string} the style of the cell outline. Options: 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', hidden.
// "borderWidth": "1px", // {string} the width of cell border in px.
// "fontFamily": ["helvetica", "arial"], // {string[]} array of fonts.
// "fontStyle": "normal", // {string} the style of the font. Options: 'normal', 'italic', 'oblique'
// "fontSize": "11px", // {string} font size.
// "fontWeight": "normal" // {string} font weight. Options: 'normal', 'bold', 'bolder', 'lighter', number
// },
// "tableHeaderStyle": {
// "backgroundColor": "#202020",
// "secondaryBackgroundColor": "",
// "foregroundColor": "#ffffff",
// "textDecoration": "",
// "image": "",
// "lineColor": "#c0c0c0",
// "borderStyle": "solid",
// "borderWidth": "1px",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "normal",
// "fontSize": "11px",
// "fontWeight": "bold"
// },
// "rowBorderStyle": {
// "backgroundColor": "",
// "secondaryBackgroundColor": "",
// "foregroundColor": "",
// "textDecoration": "",
// "image": "",
// "lineColor": "",
// "borderStyle": "solid",
// "borderWidth": "1px",
// "fontFamily": "",
// "fontStyle": "",
// "fontSize": "",
// "fontWeight": ""
//
// },
// "cellBorderStyle": {
// "backgroundColor": "",
// "secondaryBackgroundColor": "",
// "foregroundColor": "",
// "textDecoration": "underline",
// "image": "",
// "lineColor": "",
// "borderStyle": "",
// "borderWidth": "2px",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "normal",
// "fontSize": "11px",
// "fontWeight": "bold"
// },
// "rowBackgroundStyle": {
// "backgroundColor": "",
// "secondaryBackgroundColor": "",
// "foregroundColor": "",
// "textDecoration": "underline",
// "image": "",
// "lineColor": "",
// "borderStyle": "",
// "borderWidth": "2px",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "normal",
// "fontSize": "11px",
// "fontWeight": ""
// },
// "rowAlternateBackgroundStyle": {
// "backgroundColor": "#f5f5f5",
// "secondaryBackgroundColor": "",
// "foregroundColor": "",
// "textDecoration": "",
// "image": "",
// "lineColor": "",
// "borderStyle": "",
// "borderWidth": "",
// "fontFamily": "",
// "fontStyle": "",
// "fontSize": "11px",
// "fontWeight": ""
// },
// "rowHoverStyle": {
// "backgroundColor": "#dddddd",
// "secondaryBackgroundColor": "",
// "foregroundColor": "#333333",
// "textDecoration": "",
// "image": "",
// "lineColor": "",
// "borderStyle": "",
// "borderWidth": "1px",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "normal",
// "fontSize": "11px",
// "fontWeight": "normal"
// },
// "rowSelectedStyle": {
// "backgroundColor": "#0088cc",
// "secondaryBackgroundColor": "",
// "foregroundColor": "#ffffff",
// "textDecoration": "",
// "image": "",
// "lineColor": "",
// "borderStyle": "",
// "borderWidth": "",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "normal",
// "fontSize": "11px",
// "fontWeight": "bold"
// },
// "paginationButtonStyle": {
// "backgroundColor": "",
// "secondaryBackgroundColor": "",
// "foregroundColor": "#202020",
// "textDecoration": "",
// "image": "",
// "lineColor": "",
// "borderStyle": "solid",
// "borderWidth": "1px",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "normal",
// "fontSize": "12px",
// "fontWeight": "bold"
// },
// "paginationHoverStyle": {
// "backgroundColor": "#252525",
// "secondaryBackgroundColor": "",
// "foregroundColor": "#ffffff",
// "textDecoration": "",
// "image": "",
// "lineColor": "",
// "borderStyle": "solid",
// "borderWidth": "1px",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "normal",
// "fontSize": "12px",
// "fontWeight": "bold"
// },
// "paginationSelectedStyle": {
// "backgroundColor": "#0088cc",
// "secondaryBackgroundColor": "",
// "foregroundColor": "#ffffff",
// "textDecoration": "",
// "image": "",
// "lineColor": "",
// "borderStyle": "solid",
// "borderWidth": "1px",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "normal",
// "fontSize": "12px",
// "fontWeight": "bold"
// },
// "toolbarStyle": {
// "backgroundColor": "#fafafa",
// "secondaryBackgroundColor": "",
// "foregroundColor": "#202020",
// "textDecoration": "",
// "image": "",
// "lineColor": "",
// "borderStyle": "solid",
// "borderWidth": "1px",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "normal",
// "fontSize": "12px",
// "fontWeight": ""
// },
// "rowFormatterStyle": {
// "backgroundColor": "#636262",
// "secondaryBackgroundColor": "",
// "foregroundColor": "white",
// "textDecoration": "underline",
// "image": "",
// "lineColor": "black",
// "borderStyle": "solid",
// "borderWidth": "1px",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "normal",
// "fontSize": "14px",
// "fontWeight": "bold"
// },
// "highSalaryStyle": {
// "backgroundColor": "red",
// "secondaryBackgroundColor": "",
// "foregroundColor": "white",
// "textDecoration": "underline",
// "image": "",
// "lineColor": "red",
// "borderStyle": "solid",
// "borderWidth": "1px",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "italic",
// "fontSize": "12px",
// "fontWeight": "bold"
// },
// "lowSalaryStyle": {
// "backgroundColor": "green",
// "secondaryBackgroundColor": "",
// "foregroundColor": "white",
// "textDecoration": "underline",
// "image": "",
// "lineColor": "",
// "borderStyle": "",
// "borderWidth": "",
// "fontFamily": ["helvetica", "arial"],
// "fontStyle": "italic",
// "fontSize": "12px",
// "fontWeight": "bold"
// },
// "sortAscendingStyle": {
// "backgroundColor": "",
// "secondaryBackgroundColor": "",
// "foregroundColor": "",
// "textDecoration": "",
// "image": "/Thingworx/MediaEntities/GridSortAscendingArrow",
// "lineColor": "",
// "borderStyle": "",
// "borderWidth": "",
// "fontFamily": "",
// "fontStyle": "",
// "fontSize": "",
// "fontWeight": ""
// },
// "sortDescendingStyle": {
// "backgroundColor": "",
// "secondaryBackgroundColor": "",
// "foregroundColor": "",
// "textDecoration": "",
// "image": "/Thingworx/MediaEntities/GridSortDescendingArrow",
// "lineColor": "",
// "borderStyle": "",
// "borderWidth": "",
// "fontFamily": "",
// "fontStyle": "",
// "fontSize": "",
// "fontWeight": ""
// }
// },
// "search": { // Optional search capabilities
// "multiColumn": { // Optional global grid search control
// "enabled": true, // {boolean} enable the grid search toolbar
// "location": "top-left" // {string} location of grid search toolbar. Options: 'top-right', 'top-left', 'bottom-right', 'bottom-left'
// }
// },
// "resetButton": { // Optional cookie reset button to clear all user specific grid settings
// "enabled": false, // {boolean} enable the reset button to make it appear in grid.
// "location": "top-right" // {string} location of the reset button. Options: 'top-right', 'top-left', 'bottom-right', 'bottom-left'
// }
};
var result= configuration;

  

1 reply

T
TonyZhang16-Pearl
16-Pearl
July 26, 2021

Hi @GAjey,

I didn't find any issue in your json configuration at first glance.


> I want to make only few columns of table to editable
This can be controlled by specifying "cellEditor" under "columns" >"columnDefs" > "columnFormatter"
"cellEditor":{ 
    "enabled": true
}   

 

> state formatting to columns according to the value
This can be achieved by specifying "stateDefinition" under "columns" >"columnDefs" > "columnFormatter"

 

For sample mashups with advanced grid, you can download/save xml file from below links.
https://support.ptc.com/help/thingworx/platform/r9/en/index.html#page/ThingWorx%2FHelp%2FMashup_Builder%2FWidgets%2FWorkingWithAConfigurationService.html

https://support.ptc.com/help/thingworx/platform/r9/en/index.html#page/ThingWorx%2FHelp%2FMashup_Builder%2FWidgets%2FAdvancedGridsSamplesFile.html%23wwID0ELWP5 > Grid Advanced Example Entities

 

After importing GridAdvancedExampleEntities.xml, run InitWeatherTable service of Thing:GridAdvancedExampleServices first to generate records in datatable for grid display.
Then check below out.

  • Mashup:WeatherGridEditManualSaveCfgExample
  • Thing:GridAdvancedExampleServices, especially GetWeatherEditGridConfiguration service where returns the configuration for grid advanced widget.
     
G
GAjey10-MarbleAuthor
10-Marble
August 3, 2021

Thanks for your replay

 

I'm trying to understand and applying these sample configuration but now I'm not able to apply state defination.

Please find below json config. please help me to find what is wrong I'm doing here

 

{
"cellEditingEnabled": true, // {boolean} Optional. Specifies whether Cell editing is enabled by default for the grid, required for auto-save use-case. Disable for manual save; enable 'editButtons' in config below instead.
"columns": { // Required
"idFieldName": "Id", // {string} Required. The name of the 'id' column containing the primary key.
"header": { // Optional
"titleCase": "", // *{string} header title case setting. Options: 'lower', 'upper', 'camel'
"overflow": "tooltip" // *{string} header overflow setting. Options: 'fitted', 'wrapped', 'clipped', 'ellipsis'
},
"columnDefs": [ // Optional
{
"targets": 0, // {integer} the index of the column to which this data applies.
"fieldName": "s1_06-07", // {string} the data field name.
"title": "06-07", // *{string} the column display name.
"width": "*", // *{string} the column width in px. Options: '*' (auto-width) or a number.
"autoWidth": true, // *{boolean} enables auto width e.g. '*' setting above.
"overflow": "wrapped", // *{string} cell overflow setting. Options: 'fitted', 'wrapped', 'clipped', 'ellipsis'
"headerTextAlignment": "center", // *{string} header text alignment. Options: 'left', 'right', 'center'.
"textAlignment": "left", // *{string} cell text alignment. Options: 'left', 'right', 'center'.
"hidden": false, // *{boolean} hide column. If context menu is enabled, end-user can unhide column. Data of this column will be available for state formatting.
"inLayout": true,
"columnFormatter": {
"type": "number",
"format": "0.00",
"cellEditor": { // optional: defines cell-editing options for this column
"enabled": true } // *{boolean} to indicate whether cell editing is enable for this column
}
},
{
"targets": 1, // {integer} the index of the column to which this data applies.
"fieldName": "s1_07-08", // {string} the data field name.
"title": "07-08", // *{string} the column display name.
"width": "*", // *{string} the column width in px. Options: '*' (auto-width) or a number.
"autoWidth": true, // *{boolean} enables auto width e.g. '*' setting above.
"overflow": "wrapped", // *{string} cell overflow setting. Options: 'fitted', 'wrapped', 'clipped', 'ellipsis'
"headerTextAlignment": "center", // *{string} header text alignment. Options: 'left', 'right', 'center'.
"textAlignment": "left", // *{string} cell text alignment. Options: 'left', 'right', 'center'.
"hidden": false, // *{boolean} hide column. If context menu is enabled, end-user can unhide column. Data of this column will be available for state formatting.
"inLayout": true,
"columnFormatter": {
"type": "number",
"format": "0.00",
"cellEditor": { // optional: defines cell-editing options for this column
"enabled": true // *{boolean} to indicate whether cell editing is enable for this column
}
}
},
{
"targets": 2, // {integer} the index of the column to which this data applies.
"fieldName": "s1_08-09", // {string} the data field name.
"title": "08-09", // *{string} the column display name.
"width": "*", // *{string} the column width in px. Options: '*' (auto-width) or a number.
"autoWidth": true, // *{boolean} enables auto width e.g. '*' setting above.
"overflow": "wrapped", // *{string} cell overflow setting. Options: 'fitted', 'wrapped', 'clipped', 'ellipsis'
"headerTextAlignment": "center", // *{string} header text alignment. Options: 'left', 'right', 'center'.
"textAlignment": "left", // *{string} cell text alignment. Options: 'left', 'right', 'center'.
"hidden": false, // *{boolean} hide column. If context menu is enabled, end-user can unhide column. Data of this column will be available for state formatting.
"inLayout": true,
"columnFormatter": {
"type": "number",
"format": "0.00",
"cellEditor": { // optional: defines cell-editing options for this column
"enabled": true // *{boolean} to indicate whether cell editing is enable for this column
},
"stateDefinition": {
"name": "TestDataStateDefination_SD",
"fieldName": "s1_08-09",
"type": "non-fixed",
"states": [
{
"name": "min1",
"value": 20 ,
"comparator": "<=",
"styleName": "TestDataYellowStyle_Style"
},
{
"name": "min2",
"value": 10,
"comparator": "<=",
"styleName": "TestDataRedStyle_Style"
},
{
"name": "max1",
"value": 30,
"comparator": "<=",
"styleName": "TestDataGreenStyle_Style"
},
{
"name": "max2",
"value": 40,
"comparator": "<",
"styleName": "TestDataRedStyle_Style"
},{
"name": "Maximum",
"value": "500",
"comparator": "<=",
"styleName": "TestDataRedStyle_Style"
},{
"name": "Minimum",
"value": 3,
"comparator": "<",
"styleName": "LabbookDefaultStyle_Style"
}
]
}
}
}

],
"enableSorting": false, // Optional. Enable sorting capabilities for the grid.

},
"rows": { // Optional
"selection": "multi", // *{string} row selection setting. Options: 'none, 'single', 'multi'
"defaultSelectedRows": "", // *{string} default row selection setting starting with row 1. Options: '1', '1,2,3', '1-5,10'
"minHeight": "45", // {string} row height setting in px.
"autoScroll": true // {boolean} scroll to the selected rows on update or resize
},
"styles": { // Optional unless styles are defined in state formatters
"tableWrapperStyle": { // {string} name of the style.
"backgroundColor": "#e6e6e6", // {string} the background style color
"secondaryBackgroundColor": "", // {string} the secondary background style color for a gradient.
"foregroundColor": "", // {string} the font color.
"textDecoration": "", // {string} text decoration settings. Options: 'underline', 'line-through', 'overline'
"image": "", // {string} MediaEntity url
"lineColor": "#b3b3b3", // {string} the color of the cell outline.
"borderStyle": "solid", // {string} the style of the cell outline. Options: 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', hidden.
"borderWidth": "1px", // {string} the width of cell border in px.
"fontFamily": ["helvetica", "arial"], // {string[]} array of fonts.
"fontStyle": "normal", // {string} the style of the font. Options: 'normal', 'italic', 'oblique'
"fontSize": "11px", // {string} font size.
"fontWeight": "normal" // {string} font weight. Options: 'normal', 'bold', 'bolder', 'lighter', number
},
"tableHeaderStyle": {
"backgroundColor": "#202020",
"secondaryBackgroundColor": "",
"foregroundColor": "#ffffff",
"textDecoration": "",
"image": "",
"lineColor": "#c0c0c0",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "11px",
"fontWeight": "bold"
},
"rowBorderStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"cellBorderStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "underline",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "2px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "11px",
"fontWeight": "bold"
},
"rowBackgroundStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "2px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "11px",
"fontWeight": ""
},
"rowAlternateBackgroundStyle": {
"backgroundColor": "#f5f5f5",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "11px",
"fontWeight": ""
},
"rowHoverStyle": {
"backgroundColor": "#dddddd",
"secondaryBackgroundColor": "",
"foregroundColor": "#333333",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "1px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "11px",
"fontWeight": "normal"
},
"rowSelectedStyle": {
"backgroundColor": "#0088cc",
"secondaryBackgroundColor": "",
"foregroundColor": "#ffffff",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "11px",
"fontWeight": "bold"
},
"paginationButtonStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "#202020",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "12px",
"fontWeight": "bold"
},
"paginationHoverStyle": {
"backgroundColor": "#252525",
"secondaryBackgroundColor": "",
"foregroundColor": "#ffffff",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "12px",
"fontWeight": "bold"
},
"paginationSelectedStyle": {
"backgroundColor": "#0088cc",
"secondaryBackgroundColor": "",
"foregroundColor": "#ffffff",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "12px",
"fontWeight": "bold"
},
"toolbarStyle": {
"backgroundColor": "#fafafa",
"secondaryBackgroundColor": "",
"foregroundColor": "#202020",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "12px",
"fontWeight": ""
},
"rowFormatterStyle": {
"backgroundColor": "#636262",
"secondaryBackgroundColor": "",
"foregroundColor": "white",
"textDecoration": "underline",
"image": "",
"lineColor": "black",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "14px",
"fontWeight": "bold"
},
"sortAscendingStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "/Thingworx/MediaEntities/GridSortAscendingArrow",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"sortDescendingStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "/Thingworx/MediaEntities/GridSortDescendingArrow",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"rowIconStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "/Thingworx/MediaEntities/GridRowIcon",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"rowExpansionIconStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "/Thingworx/MediaEntities/GridRowExpansionIcon",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"rowCollapseIconStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "/Thingworx/MediaEntities/GridRowCollapseIcon",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"snowFormatterStyle": {
"backgroundColor": "#00ffff",
"secondaryBackgroundColor": "",
"foregroundColor": "white",
"textDecoration": "underline",
"image": "",
"lineColor": "black",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "14px",
"fontWeight": "bold"
},
"coldFormatterStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "black",
"textDecoration": "underline",
"image": "/Thingworx/MediaEntities/SubsystemNotRunning",
"lineColor": "black",
"borderStyle": "",
"borderWidth": "",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "14px",
"fontWeight": "bold"
},
"warmFormatterStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "black",
"textDecoration": "underline",
"image": "/Thingworx/MediaEntities/SubsystemRunning",
"lineColor": "black",
"borderStyle": "",
"borderWidth": "",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "14px",
"fontWeight": "bold"
},
"cellValidationErrorStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "black",
"textDecoration": "none",
"image": "",
"lineColor": "red",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "11px",
"fontWeight": "normal"
},
"cellValidationErrorTooltipStyle": {
"backgroundColor": "red",
"secondaryBackgroundColor": "",
"foregroundColor": "white",
"textDecoration": "none",
"image": "",
"lineColor": "white",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "11px",
"fontWeight": "normal"
},
"tooltipStyle": {
"backgroundColor": "#0000ff",
"secondaryBackgroundColor": "",
"foregroundColor": "#ffffff",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "none",
"borderWidth": "",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "12px",
"fontWeight": ""
},
},
"search": { // Optional search capabilities
"multiColumn": { // Optional global grid search control
"enabled": false, // {boolean} enable the grid search toolbar
"location": "top-left" // {string} location of grid search toolbar. Options: 'top-right', 'top-left', 'bottom-right', 'bottom-left'
}
},
"resetButton": { // Optional reset button that allows the end-user to reset the user specific grid settings. It clears all the grid cookie values.
"enabled": false, // {boolean} show the reset button in the Mashup.
"location": "top-left" // {string} Location of the reset button. Options: top-right', 'top-left', 'bottom-right', 'bottom-left'
},
"editButtons": { // Optional edit buttons to start allow edit, save and cancel edits.
"enabled": false, // {boolean} show the 'Edit' button initially and once clicked, show 'Save' and 'Cancel' buttons
"location": "top-right", // {string} Location of the edit buttons. Options: top-right', 'top-left', 'bottom-right', 'bottom-left'
"enableAddDeleteButtons": false // {boolean} Optional. Specifies whether 'Add' and 'Delete' buttons are enabled in the grid edit toolbar.
}
};

T
TonyZhang16-Pearl
16-Pearl
August 9, 2021

Hi @GAjey,

 

You have specified styleNames: TestDataYellowStyle_Style, TestDataRedStyle_Style etc for various states/conditions, however you haven't defined the styles in the configuration.

Please find the "styles" section in your json and include definitions for TestDataYellowStyle_Style, TestDataRedStyle_Style etc.

Terms & ConditionsAccessibility statement