4-Participant

Solved

Change the color of Advance data grid based on Values

Forum|Forum|1 year ago
September 13, 2024
2 replies
1163 views

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

Best answer by Rocko

Your JSON is not correct.

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

Rocko

19-Tanzanite

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#

M

MS_10358659

Author

4-Participant

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 !

{
 "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"
 }
 }
 }
}

Rocko

Answer

19-Tanzanite

Your JSON is not correct.

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

Catalina

Community Moderator

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,

Catalina | PTC Community Moderator

Sign up

Please use your PTC eSupport account.

Welcome to the PTC Community

Please use your PTC eSupport account.

Scanning file for viruses.

This file cannot be downloaded