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

How to change the background color of filtered column

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. 

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> 

Please refer the sample link below. 


If you need further assistance please get back to us. 

Regards, 
Dinesh Rajendiran 


Loader.
Live Chat Icon For mobile
Up arrow icon