Changing PivotView's Border and Line Color

Question

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!

Saranya Sivan · Accepted Answer

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.

Mouli Eswararao · Answer

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 · Answer

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

Val Jensen · Answer

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

Saranya Sivan · Answer

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.