"Advanced Grid" custom configuration by json not working

[GAjey]

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;

[TonyZhang]

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.
   

[GAjey]

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.
}
};

[TonyZhang]

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.

[TonyZhang]

Hi @GAjey,

If you feel your question has been answered, please mark the appropriate response as the Accepted Solution for the benefit of others with the same question.

Regards,

Tony

[GAjey]

Thanks @TonyZhang for your help. I was able to apply statedefinations to columns but didn't find any option even in examples you suggested.  if I want to apply a static styles to column how I can apply it using json config to style column of grid.

[TonyZhang]

Hi @GAjey,

For applying static styles to Grid Advanced, you can define below pre-defined styles in "styles" section of the configuration.

You should also be able find the sample definition of these styles in the example services like "GetWeatherEditGridConfiguration" or "GetPartsConfiguration" or "GetEmployeeConfiguration". 

If you drag and drop an Advanced Grid Widget to the mashup and navigate to "Style Properties" tab, you should be able to find below style names that are customizable.

• TableWrapperStyle
• TableHeaderStyle 
• FocusStyle 
• RowBackgroundStyle
• RowAlternateBackgroundStyle
• RowHoverStyle 
• RowSelectedStyle 
• CellBorderStyle  
• RowBorderStyle 
• ToolbarStyle 
• TooltipStyle  
• SortAscendingStyle  
• SortDescending

[TonyZhang]

Hi @GAjey,

If you feel your question has been answered, please mark the appropriate response as the Accepted Solution for the benefit of others with the same question.

Regards,

Tony