Search results

Filtering in JavaScript Grid control

18 May 2022 / 2 minutes to read

Customizing the filterbar cell element

Use the below CSS to customize the Grid Filterbar cell element present in the Grid header.

Copied to clipboard
.e-grid .e-filterbarcell {
      background-color: #deecf9;
}

Customizing the filterbar input element

Customize the Grid Filterbar input element using this CSS.

Copied to clipboard
.e-grid .e-filterbarcell .e-input-group input.e-input{
      font-family: cursive;
}

Customizing the filterbar input focus

Use the below CSS to customize the Grid Filterbar highlight color of focused filterbar input element.

Copied to clipboard
.e-grid .e-filterbarcell .e-input-group.e-input-focus::after,
.e-grid .e-filterbarcell .e-input-group.e-input-focus::before{
      background-color: #0078d7;
}

Customizing the Filterbar input clear icon

Use the below CSS to customize the Grid Filterbar input clear icon.

Copied to clipboard
.e-grid .e-filterbarcell .e-input-group .e-clear-icon::before {
    content: '\e825';
}

Customizing the Grid filtering icon

Below CSS customizes the Grid filter icon which present in the Grid header. You can also use custom icons. Here we have used bootstrap icon for filter icon element.

Copied to clipboard
.e-grid .e-icon-filter::before{
    content: '\002a';
}

Customizing the filter dialog content

Use the below CSS to customize the Grid filter dialog content element.

Copied to clipboard
.e-grid .e-filter-popup .e-dlg-content {
    background-color: #deecf9;
}

Grid filter dialog footer element an be customized by using the below CSS.

Copied to clipboard
.e-grid .e-filter-popup .e-footer-content {
    background-color: #deecf9;
}

Customizing the filter dialog input element

Use the below CSS to customize the Grid filter dialog input element.

Copied to clipboard
.e-grid .e-filter-popup .e-input-group input.e-input{
      font-family: cursive;
}

Customizing the filter dialog button element

Use the below CSS to customize the Grid filter dialog button element.

Copied to clipboard
.e-grid .e-filter-popup .e-btn{
      font-family: cursive;
}

Customizing the excel filter dialog number filters element

Grid Excel filter dialog number filters element can be customized using the below CSS.

Copied to clipboard
.e-grid .e-filter-popup .e-contextmenu-wrapper ul{
      background-color: #deecf9;
}