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

Change Advanced Grid Styling

emoreira
Amethyst

Change Advanced Grid Styling

Hi. I am trying to get the Grid Area  of the Advanced Grid configuration transparent. Does anyone know how to do it?

 

imageGrid.png

 

Here's the config I am using:

 

var result = {
"columns": {
"idFieldName": "id",
"header": {},
"columnDefs": [],
"enableSorting": true
},
"rows": {
"selection": "single",
"minHeight": "30px"
},
"styles": {
"tableWrapperStyle": {
"backgroundColor": "#333333",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "",
"lineColor": "#333333",
"borderStyle": "solid",
"borderWidth": "1px",
"fontFamily": [
"helvetica",
"arial"
],
"fontStyle": "normal",
"fontSize": "11px",
"fontWeight": "normal"
},
"tableHeaderStyle": {
"backgroundColor": "#222222",
"secondaryBackgroundColor": "",
"foregroundColor": "#ffb901",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "1px",
"fontFamily": [
"helvetica",
"arial"
],
"fontStyle": "normal",
"fontSize": "16px",
"fontWeight": "bold"
},
"rowBorderStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "1px",
"fontFamily": "",
"fontStyle": "",
"fontSize": "",
"fontWeight": ""
},
"cellBorderStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "2px",
"fontFamily": [
"helvetica",
"arial"
],
"fontStyle": "normal",
"fontSize": "16px",
"fontWeight": "bold"
},
"rowBackgroundStyle": {
"backgroundColor": "#333333",
"secondaryBackgroundColor": "",
"foregroundColor": "#42a7f1",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "2px",
"fontFamily": [
"helvetica",
"arial"
],
"fontStyle": "normal",
"fontSize": "14px",
"fontWeight": "bold"
},
"rowAlternateBackgroundStyle": {
"backgroundColor": "#333333",
"secondaryBackgroundColor": "",
"foregroundColor": "#42a7f1",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": "",
"fontStyle": "",
"fontSize": "14px",
"fontWeight": "bold"
},
"rowHoverStyle": {
"backgroundColor": "#464646",
"secondaryBackgroundColor": "",
"foregroundColor": "#42a7f1",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "1px",
"fontFamily": [
"helvetica",
"arial"
],
"fontStyle": "normal",
"fontSize": "14px",
"fontWeight": "bold"
},
"rowSelectedStyle": {
"backgroundColor": "#464646",
"secondaryBackgroundColor": "",
"foregroundColor": "#42a7f1",
"textDecoration": "",
"image": "",
"lineColor": "",
"borderStyle": "",
"borderWidth": "",
"fontFamily": [
"helvetica",
"arial"
],
"fontStyle": "normal",
"fontSize": "14px",
"fontWeight": "bold"
},
"rowFormatterStyle": {
"backgroundColor": "",
"secondaryBackgroundColor": "",
"foregroundColor": "#333333",
"textDecoration": "",
"image": "",
"lineColor": "black",
"borderStyle": "none",
"borderWidth": "1px",
"fontFamily": [
"helvetica",
"arial"
],
"fontStyle": "normal",
"fontSize": "14px",
"fontWeight": "bold"
}
},
"search": {
"multiColumn": {
"enabled": false,
"location": "top-left"
}
},
"resetButton": {
"enabled": false,
"location": "top-right"
}
}
3 REPLIES 3

Re: Change Advanced Grid Styling

Anybody?

Re: Change Advanced Grid Styling

Greetings @emoreira,

 

You can configure Advanced Grid properties as mentioned below to achieve the required.

 

1) Customize the 'RowFormat' property of Grid Advanced Widget

         

 

Make a new custom Style Definition for this property and Set Line Color to white as highlighted in below screenshot.              

 

3) Customize the 'RowAlternateBackgroundStyle' property       

      

 

Make a new custom Style Definition for this property and Set Line Color to white as highlighted in below screenshot.    

 

4) Save and refresh the mashup. The grid on mashup will be like as follows :

    1Capture.JPG

 

You can also configure "TableHeaderStyle" property to remove the background color from Header Line.

 

Hope it helps to fulfill your requirement.

 

If my response has answered your question, please mark as Accepted Solution, for the benefit of others who may have the same question.

 

Regards,

Himanshu

  

Re: Change Advanced Grid Styling

Thanks. I will test it and let you know.

 

Cheers

Ewerton

Announcements

Check out the upcoming Expert Session: Understanding ThingWorx Navigate Licensing in Community "Customer Events" section.