Community Tip - New to the community? Learn how to post a question and get help from PTC and industry experts! X
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:
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.
Answering my first question: The property is called "sortable": true/false for each column in "columnDefs".
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));
We can't modify the Advanced Grid. I am also trying for the same. https://community.ptc.com/t5/ThingWorx-Developers/Change-Grid-Header-Height/m-p/511187
Hi @DanZ.
I'm happy to advise that the ThingWorx 9.7 release will contain enhanced edit functionality in the Grid. This release is targeted (could be subject to change) by the end of the calendar year.
Regards.
--Sharon