Is it possible to re-style a filter bar?

[R Brian Lindahl]

Two things come to mind:

1. I'd like to give the filter bar row a background color to distinguish it from the rest of the grid.
2. If the column is wider than the filter <input>, the input is centered in the column. I'd like to be able to control it's alignment within the cell.

[Saravanan Arunachalam]

Hi Brian, 

Thanks for contacting Syncfusion’s support. 

We have analyzed your query, you can customize the filterbar row’s background color and control the filterbar’s input alignment by adjusting padding of the cell element. Please refer to the below style to achieve your requirement. 

<style type="text/css"> 

        .e-grid .e-filterbarcell{ 

            /*Set the background-color for the filterbar row*/ 

            background-color: antiquewhite; 

            /*adjust the alignment of input*/ 

            padding-left: 6px; 

            padding-right: 6px; 

              

        } 

    </style> 

 

 

And also refer the following kb to know more about to change the grid appearance. 

https://www.syncfusion.com/kb/5172/how-to-customize-grid-appearance-using-custom-css  

Regards, 

Saravanan A.