Skip to main content
MS_103586594-Participant
4-Participant
Sep 13, 2024 12:18 PM UTC
Solved

Change the color of Advance data grid based on Values

Hello thingworx members,

 

I want to change the color of cell based on a values in advance datagrid. The values are result of SQL query.

 

The column name and it's values are dynamic. Is there anyway I can change the color of cell in the advance datagrid without using  datashape in the state formatting option.

 

Thanks 

Rocko
RockoAnswer
19-Tanzanite
Sep 26, 2024 8:39 AM UTC

Your JSON is not correct.

"rows" and "styles" need to be on the same level as "columns", not a child of the node.

View in thread

4 replies

Rocko
Rocko19-Tanzanite
19-Tanzanite
Sep 16, 2024 6:50 AM UTC

I think you would have to use a service that dynamically generates the Configuration as a JSON string and then bind that to the config property of the AG. https://support.ptc.com/help/thingworx/platform/r9.6/en/#page/ThingWorx/Help/Mashup_Builder/Widgets/WorkingWithAConfigurationService.html#

 

Translate
MS_103586594-ParticipantAuthor
4-Participant
Sep 25, 2024 2:28 PM UTC

Hello PTC team,

I tried to follow the configuration of JSON to the data grid 

I'm trying to update the background of Source column as shown below using the configuration under properties tab of data grid.  

expecting if 
Source column value is 

SAP_PO then background of cell colour needs to be red 
SAP_CC then  background of cell colour needs to be green 


I have gone through the examples of configuration of json GetEmployeeRoleBasedConfiguration. But i failed to get the expected output. 

I have enclosed the config file and image for your reference !

Looking forward for your support to solve this issue 

Many Thanks !

demotest.png

{
 "columns": {
 "header": {
 "titleCase": "",
 "overflow": "wrapped"
 },
 "columnDefs": [
 {
 "targets": 0,
 "fieldName": "Site",
 "title": "Site",
 "width": "*",
 "autoWidth": true,
 "overflow": "wrapped",
 "headerTextAlignment": "center",
 "textAlignment": "center",
 "hidden": false,
 "inLayout": true,
 "description": "....",
 "columnFormatter": {
 "type": "string",
 "format": "full"
 }
 },
 {
 "targets": 1,
 "fieldName": "Plant",
 "title": "Plant",
 "width": "*",
 "autoWidth": true,
 "overflow": "wrapped",
 "headerTextAlignment": "center",
 "textAlignment": "center",
 "hidden": false,
 "inLayout": true,
 "description": "....",
 "columnFormatter": {
 "type": "string",
 "format": "full"
 }
 },
 {
 "targets": 2,
 "fieldName": "KPI_Category",
 "title": "KPI Category",
 "width": "*",
 "autoWidth": true,
 "overflow": "ellipsis",
 "headerTextAlignment": "center",
 "textAlignment": "left",
 "hidden": false,
 "inLayout": true,
 "description": "....",
 "columnFormatter": {
 "type": "string",
 "format": "full"
 }
 },
 {
 "targets": 3,
 "fieldName": "KPI_Name",
 "title": "KPI Name",
 "width": "*",
 "autoWidth": true,
 "overflow": "ellipsis",
 "headerTextAlignment": "center",
 "textAlignment": "center",
 "hidden": false,
 "inLayout": true,
 "description": "....",
 "columnFormatter": {
 "type": "string",
 "format": "full"
 }
 },
 {
 "targets": 4,
 "fieldName": "Unit",
 "title": "Unit",
 "width": "*",
 "autoWidth": true,
 "overflow": "wrapped",
 "headerTextAlignment": "center",
 "textAlignment": "center",
 "hidden": false,
 "inLayout": true,
 "description": "....",
 "columnFormatter": {
 "type": "string",
 "format": "full"
 }
 },
 {
 "targets": 5,
 "fieldName": "Source",
 "title": "Source",
 "width": "*",
 "autoWidth": true,
 "overflow": "wrapped",
 "headerTextAlignment": "center",
 "textAlignment": "center",
 "hidden": false,
 "inLayout": true,
 "description": "....",
 "columnFormatter": {
 "type": "string",
 "format": "full",
 "stateDefinition": {
 "name": "OnOff",
 "fieldName": "Source",
 "type": "non-fixed",
 "states": [
 {
 "name": "sappo",
 "value": "SAP_PO",
 "comparator": "==",
 "styleName": "SAPPOStyle"
 },
 {
 "name": "sapcc",
 "value": "SAP_CC",
 "comparator": "==",
 "styleName": "SAPCCStyle"
 }
 ]
 }
 }
 }
 ],
 "rows": {
 "selection": "none"
 },
 "styles": {
 "tableWrapperStyle": {
 "backgroundColor": "#e6e6e6",
 "secondaryBackgroundColor": "",
 "foregroundColor": "",
 "textDecoration": "",
 "image": "",
 "lineColor": "#b3b3b3",
 "borderStyle": "solid",
 "borderWidth": "1px",
 "fontFamily": [
 "helvetica",
 "arial"
 ],
 "fontStyle": "normal",
 "fontSize": "11px",
 "fontWeight": "normal"
 },
 "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"
 },
 "SAPPOStyle": {
 "backgroundColor": "red",
 "secondaryBackgroundColor": "",
 "foregroundColor": "white",
 "textDecoration": "underline",
 "image": "",
 "lineColor": "red",
 "borderStyle": "solid",
 "borderWidth": "1px",
 "fontFamily": [
 "helvetica",
 "arial"
 ],
 "fontStyle": "italic",
 "fontSize": "12px",
 "fontWeight": "bold"
 },
 "SAPCCStyle": {
 "backgroundColor": "green",
 "secondaryBackgroundColor": "",
 "foregroundColor": "white",
 "textDecoration": "underline",
 "image": "",
 "lineColor": "",
 "borderStyle": "",
 "borderWidth": "",
 "fontFamily": [
 "helvetica",
 "arial"
 ],
 "fontStyle": "italic",
 "fontSize": "12px",
 "fontWeight": "bold"
 }
 }
 }
}



 

 

Translate
Rocko
Rocko19-TanzaniteAnswer
19-Tanzanite
Sep 26, 2024 8:39 AM UTC

Your JSON is not correct.

"rows" and "styles" need to be on the same level as "columns", not a child of the node.

Translate
Catalina
CatalinaCommunity Manager
Community Moderator
Sep 23, 2024 8:50 AM UTC

Hi @MS_10358659,


I wanted to see if you got the help you needed.


If so, please mark the appropriate reply as the Accepted Solution or please feel free to detail in a reply what has helped you and mark it as the Accepted Solution. It will help other members who may have the same question.
Please note that industry experts also review the replies and may eventually accept one of them as solution on your behalf.


Of course, if you have more to share on your issue, please pursue the conversation.

Thanks,

Translate
Catalina | PTC Community Moderator
Terms & ConditionsAccessibility statement