Hi,I am using Thingworx 9.3.0 and trying to configure the Grid widget with a JSON. Currently I am having some troubles with small details. Unfortunately the documentation for this JSON is erroneous (missing closing brackets and wrong quotation marks) and also not complete. I also downladed the Grid Advanced sample files which helped a bit. But there are still a few issues: How can I enable sorting for specific columns? I can do this in the mashup configuration for the Grid widget. But via config I was only able to enable sorting for all columns through { "columns": { "enableSorting": true }}There is an "sortColumn" property that can be set for each column. But this does not do anything.How to center align the header content? I have set "headerTextAlignment": "center" and"textAlignment": "center" for each column in the "columnDefs" but the header-text and content itself is still aligned left.How can I properly set the max height of the header? The option "MaxHeaderSize": "32px" does nothing. Using "maxHeight": 32 in {"columns": {"header":{}}} works halfway by affecting the wrong div-container. (See attached screenshot)Also: When using conflicting max and minHeight settings for the rows, you get all kind of rendering errors and an unresponsive grid itself. I noticed that when using {"rows":{"maxHeight": 32}} which is 1px smaller than the default ptcs-div.row container.

15-Moonstone

Solved

Grid widget dynamic config - styling and column sorting

Forum|Forum|4 years ago
February 17, 2022
1 reply
4090 views

Hi,

I am using Thingworx 9.3.0 and trying to configure the Grid widget with a JSON. Currently I am having some troubles with small details. Unfortunately the documentation for this JSON is erroneous (missing closing brackets and wrong quotation marks) and also not complete. I also downladed the Grid Advanced sample files which helped a bit. But there are still a few issues:

How can I enable sorting for specific columns? I can do this in the mashup configuration for the Grid widget. But via config I was only able to enable sorting for all columns through { "columns": { "enableSorting": true }}
There is an "sortColumn" property that can be set for each column. But this does not do anything.
How to center align the header content? I have set "headerTextAlignment": "center" and
"textAlignment": "center" for each column in the "columnDefs" but the header-text and content itself is still aligned left.
How can I properly set the max height of the header? The option "MaxHeaderSize": "32px" does nothing. Using "maxHeight": 32 in {"columns": {"header":{}}} works halfway by affecting the wrong div-container. (See attached screenshot)

Also: When using conflicting max and minHeight settings for the rows, you get all kind of rendering errors and an unresponsive grid itself. I noticed that when using {"rows":{"maxHeight": 32}} which is 1px smaller than the default ptcs-div.row container.

Mashup-Widget

Best answer by slangley

Hi @DanZ.

ThingWorx 9.7 is now available. Here is a link to What's New that discusses changes around the grid widget.

If you feel the update satisfies your needs, please mark this post as the Accepted Solution. If you feel that functionality is still missing, please feel free to post a request for it on the ThingWorx Ideas forum. Doing so will allow other community members to vote for it.

Regards.

--Sharon

D

DanZ

Author

15-Moonstone

Answering my first question: The property is called "sortable": true/false for each column in "columnDefs".

S

slangley

Community Manager

Hi @DanZ.

Can you share your json so we can take a look?

Regards.

--Sharon

D

DanZ

Author

15-Moonstone

Yes of course. I have also opened a case with the PTC support (16269082), because I have the issue that my table (specific columns) are not editable even though all necessary settings are set properly. Strangely enough: The support responded that everything works fine and the columns (just checkboxes) are editable. I have tried the sample entities I have send them in multiple browsers and different TWX 9.3.0 instances, but the columns with the checkboxes are staying "disabled" and non editable.

This is my service to create the json config (this service has two string inputs: "orderType" and "orderState"):

// Hide asset columns when orderType is not "Mutterrolle"
const hideAssetSelectionColumns = orderType != 2;
const isAssetSelectionColumnInLayout = !hideAssetSelectionColumns; // InLayout defines if the user can set a column visible at runtime

// Only "Mutterrolle" in state "new" or "planning" is editable
const isEditable = orderType == "2" && (orderState == "2" || orderState == "3");
const editControlVisibility = isEditable ? "hover" : "never";

let gridTitle = "Neue Prozessaufträge";
if (orderState == "2" || orderState == "3") gridTitle = "Geplante Prozessaufträge";
if (orderState == "4") gridTitle = "Fertige Prozessaufträge";
const result = {
 "label": {
 "label": gridTitle,
 "type": "sub-header",
 "alignment": "left"
 },
 "filter": {
 "show": false
 },
 "resizeColumns": false,
 "reorderColumns": false,
 "columns": {
 "idFieldName": "aufnr",
 "header": {
 "hide": false,
 "singleLine": true,
 //"maxHeight": 32,
 "selectionCheckboxAlignment": "bottom",
 "sortSelectionColumn": true,
 "overflow": "disclosure" // *{string} header overflow setting. Options: 'fitted', 'wrapped', 'clipped', 'ellipsis'
 },
 "enableSorting": false, // Optional. Enable sorting capabilities for the grid.
 "columnDefs": [
 {
 "targets": 0, 	// {integer} the index of the column to which this data applies.
 "fieldName": "aufnr", 	// {string} the data field name.
 "title": "Auftrag", 		// *{string} the column display name.
 "autoWidth": true,
 "overflow": "wrapped", 	// *{string} cell overflow setting. Options: 'fitted', 'wrapped', 'clipped', 'ellipsis'
 "headerTextAlignment": "left", // *{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,
 "sortable": true,
 "columnFormatter": {
 "type": "string",
 "cellEditor": { 	// optional: defines cell-editing options for this column
 "enabled": false 		// *{boolean} to indicate whether cell editing is enable for this column
 } 
 }
 },
 {
 "targets": 1,
 "fieldName": "matnr",
 "title": "Material",
 "autoWidth": true,
 "overflow": "wrapped",
 "headerTextAlignment": "left",
 "textAlignment": "left",
 "hidden": false,
 "inLayout": true,
 "sortable": true,
 "columnFormatter": {
 "type": "string",
 "cellEditor": {
 "enabled": false
 } 
 }
 },
 {
 "targets": 2,
 "fieldName": "matktx",
 "title": "Beschreibung",
 "autoWidth": true,
 "overflow": "wrapped",
 "headerTextAlignment": "left",
 "textAlignment": "left",
 "hidden": false,
 "inLayout": true,
 "sortable": false,
 "columnFormatter": {
 "type": "string",
 "cellEditor": {
 "enabled": false
 } 
 }
 },
 {
 "targets": 3,
 "fieldName": "inserttime",
 "title": "Import",
 "autoWidth": true,
 "overflow": "wrapped",
 "headerTextAlignment": "left",
 "textAlignment": "left",
 "hidden": false,
 "inLayout": true,
 "sortable": true,
 "columnFormatter": {
 "type": "datetime",
 "format":"DD.MM.YYYY - HH:mm:ss",
 "cellEditor": {
 "enabled": false
 } 
 }
 },
 {
 "targets": 4,
 "fieldName": "posnr",
 "title": "Position",
 "autoWidth": true,
 "overflow": "wrapped",
 "headerTextAlignment": "center",
 "textAlignment": "left",
 "hidden": true,
 "inLayout": false,
 "sortable": false,
 "columnFormatter": {
 "type": "string",
 "cellEditor": {
 "enabled": false
 } 
 }
 },
 {
 "targets": 5,
 "fieldName": "anlagenstatus",
 "title": "Status",
 "autoWidth": true,
 "overflow": "wrapped",
 "headerTextAlignment": "left",
 "textAlignment": "left",
 "hidden": true,
 "inLayout": false,
 "sortable": false,
 "columnFormatter": {
 "type": "string",
 "cellEditor": {
 "enabled": false
 } 
 }
 },
 {
 "targets": 6,
 "fieldName": "aufart",
 "title": "Typ",
 "autoWidth": true,
 "overflow": "wrapped",
 "headerTextAlignment": "left",
 "textAlignment": "left",
 "hidden": true,
 "inLayout": false,
 "sortable": false,
 "columnFormatter": {
 "type": "string",
 "cellEditor": {
 "enabled": false
 } 
 }
 },
 {
 "targets": 7,
 "fieldName": "aufstatus",
 "title": "Auftragsstatus",
 "autoWidth": true,
 "overflow": "wrapped",
 "headerTextAlignment": "center",
 "textAlignment": "left",
 "hidden": true,
 "inLayout": false,
 "sortable": false,
 "columnFormatter": {
 "type": "string",
 "cellEditor": {
 "enabled": false,
 } 
 }
 },
 {
 "targets": 8,
 "fieldName": "AN2",
 "title": "A",
 "autoWidth": false,
 "width": "50px",
 "overflow": "fitted",
 "headerTextAlignment": "center",
 "textAlignment": "center",
 "hidden": hideAssetSelectionColumns,
 "inLayout": isAssetSelectionColumnInLayout,
 "sortable": false,
 "columnFormatter": {
 "type": "boolean",
 "format": "checkbox",
 "cellEditor": {
 "enabled": isEditable
 } 
 }
 },
 {
 "targets": 9,
 "fieldName": "AN3",
 "title": "C",
 "autoWidth": false,
 "width": "50px",
 "overflow": "fitted",
 "headerTextAlignment": "center",
 "textAlignment": "center",
 "hidden": hideAssetSelectionColumns,
 "inLayout": isAssetSelectionColumnInLayout,
 "sortable": false,
 "columnFormatter": {
 "type": "boolean",
 "format": "checkbox",
 "cellEditor": {
 "enabled": isEditable
 } 
 }
 },
 {
 "targets": 10,
 "fieldName": "AN4",
 "title": "D",
 "autoWidth": false,
 "width": "50px",
 "overflow": "none",
 "headerTextAlignment": "center",
 "textAlignment": "center",
 "hidden": hideAssetSelectionColumns,
 "inLayout": isAssetSelectionColumnInLayout,
 "sortable": false,
 "columnFormatter": {
 "type": "boolean",
 "format": "checkbox",
 "cellEditor": {
 "enabled": isEditable
 } 
 }
 },
 {
 "targets": 11,
 "fieldName": "AN5",
 "title": "F",
 "autoWidth": false,
 "width": "50px",
 "overflow": "fitted",
 "headerTextAlignment": "center",
 "textAlignment": "center",
 "hidden": hideAssetSelectionColumns,
 "inLayout": isAssetSelectionColumnInLayout,
 "sortable": false,
 "columnFormatter": {
 "type": "boolean",
 "format": "checkbox",
 "cellEditor": {
 "enabled": isEditable
 } 
 }
 },
 {
 "targets": 12,
 "fieldName": "AN7",
 "title": "B",
 "autoWidth": false,
 "width": "50px",
 "overflow": "fitted",
 "headerTextAlignment": "center",
 "textAlignment": "center",
 "hidden": hideAssetSelectionColumns,
 "inLayout": isAssetSelectionColumnInLayout,
 "sortable": false,
 "columnFormatter": {
 "type": "boolean",
 "format": "checkbox",
 "cellEditor": {
 "enabled": isEditable
 } 
 }
 },
 {
 "targets": 13,
 "fieldName": "AN8",
 "title": "E",
 "autoWidth": false,
 "width": "50px",
 "overflow": "fitted",
 "headerTextAlignment": "center",
 "textAlignment": "center",
 "hidden": hideAssetSelectionColumns,
 "inLayout": isAssetSelectionColumnInLayout,
 "sortable": false,
 "columnFormatter": {
 "type": "boolean",
 "format": "checkbox",
 "cellEditor": {
 "enabled": isEditable
 } 
 }
 }
 ]
 },
 "rows": {
 "selection": "single",
 "singleLine": true,
 },
 "editButtons": {
 "enabled": isEditable,
 "editButton": false,
 "editLevel": "row", //* Controls the edit level. Options: "row", "cell", "grid"
 "rowDeleteButton": false,
 "rowAddButton": false,
 "editControlVisibility": "hover", // Controls the visibility of the edit controls on the grid. Options: 'hover', 'always', 'never'}
 "editControlType": "icon",
 "editControlLabel": "Edit",
 }
};

logger.info(JSON.stringify(result));

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