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

Community Tip - Want the oppurtunity to discuss enhancements to PTC products? Join a working group! X

MaxHeaderHeight on Advanced Grid using JSON Configuration

cfpenteado
6-Contributor

MaxHeaderHeight on Advanced Grid using JSON Configuration

I have not been able to set the MaxHeaderHeight on the Advanced Grid using the JSON Configuration option. 

 

I've tried:

"maxHeaderHeight":"18",

"maxHeaderHeight":"18px",

"MaxHeaderHeight":"18",

"MaxHeaderHeight":"18px",

 

at the root of the JSON and in other locations and nothing. Has anyone been able to do this and could share the solution please?

8 REPLIES 8
posipova
20-Turquoise
(To:cfpenteado)

Have you seen the example entity (part of the advanced grid extension)?  It should work with "MaxHeaderSize" : "50px".

cfpenteado
6-Contributor
(To:posipova)

Which service did you find that in? I thought I checked all of them, but maybe I did not? Thank you!

posipova
20-Turquoise
(To:cfpenteado)

 Thing: GridAdvancedExampleServices, service:  GetWeatherConfiguration

 

Hope this helps!

cfpenteado
6-Contributor
(To:posipova)

I'm looking at it. I don't see MaxHeaderHeight. 

Could you copy it over from your server please?

 

here's that service on my server, no header height:

 

var result = {
"columns": { // Required
"idFieldName": "id", // {string} Required. The name of the 'id' column containing the primary key.
"header": { // Optional
"titleCase": "", // *{string} header title case setting. Options: 'lower', 'upper', 'camel'
"overflow": "tooltip" // *{string} header overflow setting. Options: 'fitted', 'wrapped', 'clipped', 'ellipsis'
},
"columnDefs": [ // Optional
{
"targets": 0, // {integer} the index of the column to which this data applies.
"fieldName": "id", // {string} the data field name.
"title": "Id", // *{string} the column display name.
"width": "100px", // *{string} the column width in px. Options: '*' (auto-width) or a number.
"autoWidth": false, // *{boolean} enables auto width e.g. '*' setting above.
"overflow": "wrapped", // *{string} cell overflow setting. Options: 'fitted', 'wrapped', 'clipped', 'ellipsis'
"headerTextAlignment": "center", // *{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,
"columnFormatter": {
"type": "integer",
"format": "0"
}
},
{
"targets": 1,
"fieldName": "date",
"title": "Date",
"width": "50px",
"autoWidth": false,
"overflow": "tooltip",
"headerTextAlignment": "center",
"textAlignment": "center",
"hidden": false,
"inLayout": true,
"columnFormatter": {
"type": "datetime",
"format": "MM.DD.YYYY"
}
},
{
"targets": 2,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "",
"autoWidth": true,
"overflow": "ellipsis",
"headerTextAlignment": "center",
"textAlignment": "center",
"hidden": false,
"inLayout": true,
"columnFormatter": {
"type": "number",
"format": "0.00F",
"stateDefinition": {
"name": "OnOff",
"fieldName": "events",
"type": "non-fixed",
"states": [
{
"name": "Rain",
"value": "Snow",
"comparator": "==",
"styleName": "snowFormatterStyle"
},
{
"name": "Fog",
"value": "Fog",
"comparator": "==",
"styleName": "lowSalaryStyle"
}
]
}
}
},
{
"targets": 3,
"fieldName": "min_temp",
"title": "Min Temp",
"width": "",
"autoWidth": true,
"overflow": "tooltip",
"headerTextAlignment": "center",
"textAlignment": "center",
"hidden": false,
"inLayout": true,
"columnFormatter": {
"type": "number",
"format": "0.00F"
}
},
{
"targets": 4,
"fieldName": "cold",
"title": "Cold?",
"width": "50px",
"autoWidth": false,
"overflow": "ellipsis",
"headerTextAlignment": "center",
"textAlignment": "center",
"hidden": false,
"inLayout": true,
"columnFormatter": {
"type": "boolean",
"format": "notext",
"stateDefinition": {
"name": "Cold",
"fieldName": "cold",
"type": "non-fixed",
"states": [
{
"name": "Cold",
"value": true,
"comparator": "==",
"styleName": "coldFormatterStyle"
},
{
"name": "Warm",
"value": false,
"comparator": "==",
"styleName": "warmFormatterStyle"
}
]
}
}
},
{
"targets": 5,
"fieldName": "visibility",
"title": "Visibility",
"width": "",
"autoWidth": true,
"overflow": "ellipsis",
"headerTextAlignment": "center",
"textAlignment": "center",
"hidden": false,
"inLayout": true,
"columnFormatter": {
"type": "long",
"format": "0.00"
}
},
{
"targets": 6,
"fieldName": "wind",
"title": "Wind",
"width": "",
"autoWidth": true,
"overflow": "ellipsis",
"headerTextAlignment": "center",
"textAlignment": "center",
"hidden": false,
"inLayout": true,
"columnFormatter": {
"type": "number",
"format": "0.00 Mph"
}
},
{
"targets": 7,
"fieldName": "precipitation",
"title": "Precipitation",
"width": "100px",
"autoWidth": true,
"overflow": "ellipsis",
"headerTextAlignment": "center",
"textAlignment": "center",
"hidden": false,
"inLayout": true,
"columnFormatter": {
"type": "number",
"format": "0.00 mm"
}
},
{
"targets": 8,
"fieldName": "events",
"title": "Currently",
"width": "*",
"autoWidth": true,
"overflow": "wrapped",
"headerTextAlignment": "center",
"textAlignment": "center",
"hidden": false,
"inLayout": true
},
{
"targets": 9,
"fieldName": "image",
"title": "Forecast",
"width": "",
"autoWidth": true,
"overflow": "tooltip",
"headerTextAlignment": "center",
"textAlignment": "left",
"hidden": false,
"inLayout": true,
"columnFormatter": {
"type": "imagelink", // imagelink renderer, requires the cell data to contain a url to a MediaEntity
"format": "scaledtoheight" // hyperlink, scaledtowidth, scaledtoheight, image
}
}
],
"enableSorting": true, // Optional. Enable sorting capabilities for the grid.
"multiColumnSortOrder": [ // Optional. Sorts grid by multiple columns. The most prominent column is listed last.
{
"id": 'id', // {string} column 'fieldName'
"direction": 'asc' // {string} direction of the sort, e.g. ascending or descending. Options: 'asc', 'des'
}
]
},
"rows": { // Optional
"selection": "multi", // *{string} row selection setting. Options: 'none, 'single', 'multi'
"defaultSelectedRows": "", // *{string} default row selection setting starting with row 1. Options: '1', '1,2,3', '1-5,10'
"minHeight": "50px" // {string} row height setting in px.
},
"styles": { // Optional unless styles are defined in state formatters
"tableWrapperStyle": { // {string} name of the style.
"backgroundColor": "#e6e6e6", // {string} the background style color
"secondaryBackgroundColor": "", // {string} the secondary background style color for a gradient.
"foregroundColor": "", // {string} the font color.
"textDecoration": "", // {string} text decoration settings. Options: 'underline', 'line-through', 'overline'
"image": "", // {string} MediaEntity url
"lineColor": "#b3b3b3", // {string} the color of the cell outline.
"borderStyle": "solid", // {string} the style of the cell outline. Options: 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'none', hidden.
"borderWidth": "1px", // {string} the width of cell border in px.
"fontFamily": ["helvetica", "arial"], // {string[]} array of fonts.
"fontStyle": "normal", // {string} the style of the font. Options: 'normal', 'italic', 'oblique'
"fontSize": "11px", // {string} font size.
"fontWeight": "normal" // {string} font weight. Options: 'normal', 'bold', 'bolder', 'lighter', number
},
"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": "",
"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"
},
"sortAscendingStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "/Thingworx/MediaEntities/GridSortAscendingArrow",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"sortDescendingStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "/Thingworx/MediaEntities/GridSortDescendingArrow",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"rowIconStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "/Thingworx/MediaEntities/GridRowIcon",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"rowExpansionIconStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "/Thingworx/MediaEntities/GridRowExpansionIcon",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"rowCollapseIconStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "/Thingworx/MediaEntities/GridRowCollapseIcon",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"snowFormatterStyle": {
"backgroundColor": "#00ffff",
"secondaryBackgroundColor": "",
"foregroundColor": "white",
"textDecoration": "underline",
"image": "",
"lineColor": "black",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "14px",
"fontWeight": "bold"
},
"coldFormatterStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "black",
"textDecoration": "underline",
"image": "/Thingworx/MediaEntities/SubsystemNotRunning",
"lineColor": "black",
"borderStyle": "",
"borderWidth": "",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "14px",
"fontWeight": "bold"
},
"warmFormatterStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "black",
"textDecoration": "underline",
"image": "/Thingworx/MediaEntities/SubsystemRunning",
"lineColor": "black",
"borderStyle": "",
"borderWidth": "",
"fontFamily": ["helvetica", "arial"],
"fontStyle": "normal",
"fontSize": "14px",
"fontWeight": "bold"
}
},
"search": { // Optional search capabilities
"multiColumn": { // Optional global grid search control
"enabled": true, // {boolean} enable the grid search toolbar
"location": "top-left" // {string} location of grid search toolbar. Options: 'top-right', 'top-left', 'bottom-right', 'bottom-left'
}
},
"resetButton": { // Optional reset button that allows the end-user to reset the user specific grid settings. It clears all the grid cookie values.
"enabled": true, // {boolean} show the reset button in the Mashup.
"location": "top-right" // {string} Location of the reset button. Options: top-right', 'top-left', 'bottom-right', 'bottom-left'
}
};

posipova
20-Turquoise
(To:cfpenteado)

It's referenced through columns.header.maxHeight, so similarly to the config parameters in the service provided, you'd do:

"header": {

"maxHeight": "50px"}

posipova
20-Turquoise
(To:posipova)

try putting it here

 

cfpenteado
6-Contributor
(To:posipova)

hmm. odd. I've tried that, but it does not work. I think I've got this right, but here's the start of my JSON:

 

{
"columns": {
     "idFieldName": "id",
     "header": {
          "maxHeight": "18px",
          "titleCase": "camel",
          "overflow": "wrapped"
     },
"columnDefs": [ 

....

posipova
20-Turquoise
(To:cfpenteado)

Have you seen the example entity (part of the advanced grid extension)?  It should work with "MaxHeaderSize" : "50px".

Top Tags