How to change the background color of filtered column

1 Reply
2 Participants

Created by
SK Sarathkumar, K (K.)

Platform
JavaScript - EJ 2

Platform
JavaScript - EJ 2

Control
TreeGrid

Created On
Nov 13, 2019 09:47 AM UTC

Last Activity On
Nov 15, 2019 02:05 PM UTC

Want to subscribe?
SIGN IN

Hi Expert,

1. How to change background color of the filtered columns.

2. How to remove the background color of a column among the filtered columns.

Thanks and Regards

Sarathkumar. K

1 Reply

DR Dinesh Rajendiran Syncfusion Team November 15, 2019 02:05 PM UTC

Hi Sarathkumar,

Thanks for using Syncfusion Products.

Query 1: Change the background color of the filtered columns

We have achieved your requirement using queryCellInfo event. By getting the filtered columns field names using Object.keys(), comparing them with field name of every cell of the columns using queryCellInfo event arguments and added css to the cell .

Please refer code snippet below

let treegrid: TreeGrid = new TreeGrid(

{

dataSource: summaryRowData,

allowPaging: true,

. . . . . . . . . .. . . . .

queryCellInfo: function (args) {

var filterModule = this.grid.filterModule;

var filteredFields = Object.keys(filterModule.values);

if (filterModule["column"] != undefined) {

for (var i = 0; i <= filteredFields.length; i++) {

if (filteredFields[i] == args.column.field) {

addClass([args.cell], 'filterCell');

}

if (filterModule["isRemove"] == true) {

if (filterModule["column"].field

== args.column.field) {

removeClass([args.cell], 'filterCell');

}

columns: [

{ field: 'FreightID', headerText: 'Freight ID', width: 130 },

. . . .. . . . .. . . . . .. .

});

CSS

<style>

.filterCell{

background-color:#336c12;

color:white;

}</style>

Query 2: Remove background color of the column among filtered column

We have achieved your requirement using queryCellInfo event. By checking currently filtered column’s field and queryCellInfo event arguments cell’s column field and removed the css for the respective cell.

Please refer the code snippet below.