Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X
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?
Have you seen the example entity (part of the advanced grid extension)? It should work with "MaxHeaderSize" : "50px".
Which service did you find that in? I thought I checked all of them, but maybe I did not? Thank you!
Thing: GridAdvancedExampleServices, service: GetWeatherConfiguration
Hope this helps!
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'
}
};
It's referenced through columns.header.maxHeight, so similarly to the config parameters in the service provided, you'd do:
"header": {
"maxHeight": "50px"}
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": [
....
Have you seen the example entity (part of the advanced grid extension)? It should work with "MaxHeaderSize" : "50px".