We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Is it possible to re-style a filter bar?

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.

1 Reply

SA Saravanan Arunachalam Syncfusion Team May 31, 2017 05:01 AM UTC

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; 
And also refer the following kb to know more about to change the grid appearance. 
Saravanan A. 

Live Chat Icon For mobile
Up arrow icon