1. Home
  2. Forum
  3. Angular - EJ 2
  4. grid column filter bar colors in angular

grid column filter bar colors in angular

I'm looking for a piece of css so I can globally change the colors and weights of the filter bars on grid columns

Currently when no filter is there, it's black and appears to be 1px
If it's selected it's the standard syncfusion Red/Pink and perhaps 2px.

I'd been fiddling around with this but it's not quite there:
.e-grid .e-filterbarcell{ 
  /*Set the background-color for the filterbar row*/ 
  background-color: white; 
  /* these don't do it
  color: chartreuse;
border-bottom-color: brown;
border-color: brown;
  */
  
} 
Thanks

4 Replies 1 reply marked as answer
WC Walter Cook April 28, 2021 12:39 AM UTC

Is there a repository of such properties?
I have a similar question about changing colors on the grid's column chooser.

Cheers

RS Rajapandiyan Settu Syncfusion Team April 28, 2021 02:39 PM UTC

Hi Walter, 
 
Thanks for contacting Syncfusion support. 
 
Query #1: I'm looking for a piece of css so I can globally change the colors and weights of the filter bars on grid columns 
 
By using following CSS Classes you can customize the style of filterbar cells. 
 
[app.component.css] 
 
.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 
.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 
.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), 
.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) { 
  border-color: brown; 
} 
 
.e-filterbarcell .e-filterdiv.e-fltrinputdiv .e-input-group.e-control-wrapper { 
  color: chartreuse; 
  background: white; 
} 
 
 
 
Query #2: Is there a repository of such properties?
I have a similar question about changing colors on the grid's column chooser. 
 
By using following CSS Classes you can customize the color of Grid’s ColumnChooser. 
 
[app.component.css] 
 
.e-ccdlg .e-ccul-ele.e-cc .e-ccheck .e-label { 
  color: chartreuse; 
} 
 
 
 
We have prepared a sample for your reference. You can get it from the below link, 
 
 
By using below documentation you can override the default CSS styles in the Grid. 

 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


Marked as answer
WC Walter Cook April 28, 2021 05:11 PM UTC

Pretty awesome. Thanks very much.
I'll fiddle around with how to tweak the other column chooser properties like checkbox, Ok/Cancel color.

btw, that documentation link doesn't work. it just shows
"/js/jsj/djdh This file can contain any content"

RS Rajapandiyan Settu Syncfusion Team April 29, 2021 06:42 AM UTC

Hi Walter, 
 
You’re welcome. We are glad that provided solution resolved your requirement. 
 
Query #1: I'll fiddle around with how to tweak the other column chooser properties like checkbox, Ok/Cancel color. 
 
By using following CSS Classes you can customize the checkboxes and buttons in the column chooser. 
 
[app.component.css] 
 
.e-ccdlg .e-ccul-ele.e-cc .e-ccheck span.e-check { 
  color: chartreuse; 
  background: blue; 
} 
.e-ccdlg .e-btn.e-flat.e-primary, 
.e-ccdlg .e-css.e-btn.e-flat.e-primary { 
  background-color: blue; 
  color: chartreuse; 
} 
.e-ccdlg .e-btn.e-flat, 
.e-ccdlg .e-css.e-btn.e-flat { 
  background-color: darkred; 
  color: chartreuse; 
} 
 
 
 
We have prepared a sample for your reference. You can get it from the below link. 
 
 
Query #2: that documentation link doesn't work. it just shows. 
 
We are sorry for the inconvenience caused. Please find the below documentation which illustrates how to override the default CSS Style of EJ2 Grid. 

 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


Loader.
Up arrow icon