grid column filter bar colors in angular

[Walter Cook]

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

[Walter Cook]

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

Cheers

[Rajapandiyan Settu]

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, 

 

Sample: https://stackblitz.com/edit/angular-9fwuef-9pkmzn?file=app.component.css 

 

By using below documentation you can override the default CSS styles in the Grid. 

Grid-Styling: https://ej2.syncfusion.com/javascript/documentation/grid/how-to/grid-styling/  

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Walter Cook]

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"

[Rajapandiyan Settu]

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. 

 

Sample: https://stackblitz.com/edit/angular-9fwuef-w778cf?file=app.component.css 

 

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. 

Grid-Styling: https://ej2.syncfusion.com/angular/documentation/grid/style-and-appearance/ 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S