cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Help us improve the PTC Community by taking this short Community Survey! X

Grid widget dynamic config - styling and column sorting

DanZ
15-Moonstone

Grid widget dynamic config - styling and column sorting

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:

 

  1. 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.
  2. 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.
  3. 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.

4 REPLIES 4
DanZ
15-Moonstone
(To:DanZ)

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

 

slangley
23-Emerald II
(To:DanZ)

Hi @DanZ.

 

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

 

Regards.

 

--Sharon

 

DanZ
15-Moonstone
(To:slangley)

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

 

Top Tags