Changing PivotView's Border and Line Color

[Val Jensen]

Hi, I'm trying to find a way to change the grid lines and borders colors away from the default #e0e0e0, but I'm having a difficult time finding the easiest method to do so.

I tried doing the following based on the documentation:

                gridSettings: {

                    gridLines: 'Horizontal',

                    allowTextWrap: true,

                    enableSorting: true,

                    allowReordering: true,

                    columnWidth: 110,

                    columnRender: function(args) {

                        args.columns[0].width = '150';

                    }

                },

                border: {

                    color: '#000000'

                },

                majorGridLines: {

                    color: '#000000'

                },

                labelBorder: {

                    color: '000000'

                },

But it appears to have had no effect. I might be implementing it wrong, or I'm just not using the right settings. Can you please assist? Thank you!

[Mouli Eswararao]

Hi Val, 

 

We have prepared a sample based on your requirement. Please find this in the below link. 

 

Code example: 

 

Index.html 

    #PivotView .e-grid td, 

    th, 

    .e-rhandler, 

    .e-gridheader { 

      border-color: #000 !important; 

    } 

Index.js 

  gridSettings: { 

    gridLines: "Horizontal" 

  } 

 

Sample link: https://stackblitz.com/edit/pivot-customization-tkfcqf?file=index.js 

 

Note: Border color can be customized only by the CSS option. 

 

Regards, 

Mouli 

[Val Jensen]

Hi Mouli,

Thank you for the code and the example!

Strangely, when I copy/paste the CSS example code in to my index.css, it only changes the header lines' color, none of the others. Your example js does show that it works, so I'm not sure why mine wouldn't do the same. Thoughts?

index.css

#PivotView .e-grid td,

th,

.e-rhandler,

.e-gridheader {

    border-color: #000 !important;

}

index.js

           var gSettings = {

                gridLines: "Horizontal",

                allowTextWrap: true,

                enableSorting: true,

                allowReordering: true,

                columnWidth: 110,

                columnRender: function(args) {

                    args.columns[0].width = '150';

                }

            };

Those other settings I have for the gridSettings shouldn't prevent anything, right?

Thanks,
Val

[Saranya Sivan]

Hi Val,  

  

We suspect that the “id” of your component is differed in the provided CSS. So, kindly replace your component “id” in place of “#PivotView” or use global class of pivot table “.e-pivotview”. 

 

Meanwhile we have modified the sample which is available in the below link.  

  

Code example:  

<style> 

    .e-pivotview .e-grid td, 

    th, 

    .e-rhandler, 

    .e-gridheader { 

      border-color: #000 !important; 

    } 

  </style> 

   

Sample link: https://stackblitz.com/edit/pivot-customization-tkfcqf-tjw9hs?file=index.html 

 

And the settings you mentioned in the property “gridSettings” won’t clear the above CSS. 

  

Regards,  

Saranya. 

[Val Jensen]

Hi Saranya,

That appears to have resolved the issue! Thank you all for your assistance!

[Saranya Sivan]

Hi Val, 

 

Thanks for the reply. 

  

Please let us know if you have any other queries. We are always happy to assist you.  

  

Regards, 

  

Saranya.