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
