Change Advanced Grid Styling

[emoreira]

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

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"

}

}

[emoreira]

Anybody?

[hchanana]

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 :

   

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

[emoreira]

Thanks. I will test it and let you know.

Cheers

Ewerton