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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the background color of filtered column

Thread ID:

Created:

Updated:

Platform:

Replies:

149067 Nov 13,2019 09:47 AM UTC Nov 15,2019 02:05 PM UTC JavaScript - EJ 2 1
loading
Tags: TreeGrid
Sarathkumar, K (K.)
Asked On November 13, 2019 09:47 AM UTC

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




Dinesh Rajendiran [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon