1. Home
  2. Forum
  3. Angular - EJ 2
  4. grid cell color dynamic

grid cell color dynamic

Hi,

I am trying to add color to grid cell dynamically but I couldnt find how to do.
 
p.s.

 if (args.column.field === 'RoomTypeName') {
      if (args.data['RoomColor'] != null && args.data['RoomColor'] != " ") { 
        args.cell.classList.add('.roomcolor{ background-color: ` + args.data['RoomColor']); 
      }
    }

Thanks in advance


3 Replies
PS Pavithra Subramaniyam Syncfusion Team February 12, 2019 04:05 AM UTC

Hi serdar,  
 
Thanks for contacting Syncfusion support.  
 
You can achieve your requirement by adding CSS class for the grid cells inside the ‘queryCellInfo’ event. Please refer to the below code example, documentation link and sample link for more information. 
 
[component.ts] 
@Component({ 
    selector: 'control-content', 
    template: ' <ejs-grid [dataSource]='data' height='350' (queryCellInfo)='customiseCell($event)'> 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 
           .   .   . 
        </e-columns> 
    </ejs-grid>' 
}) 
export class DefaultComponent implements OnInit { 
    public data: Object[] = []; 
 
    ngOnInit(): void { 
        this.data = orderDetails; 
    } 
     customiseCell(args: QueryCellInfoEventArgs) { 
        if (args.column.field === 'Freight') { 
            if (args.data['Freight'] < 30) { 
                args.cell.classList.add('below-30'); 
            } else if (args.data['Freight'] < 80) { 
                args.cell.classList.add('below-80'); 
            } else { 
                args.cell.classList.add('above-80'); 
            } 
        } 
    } 
} 
 
[style] 
              <style> 
                  .below-30 { 
                            background-color: orangered; 
                               } 
                   .below-80 { 
                             background-color: yellow; 
                               } 
                  .above-80 { 
                             background-color: greenyellow; 
                             } 
              </style> 
 
 
Sample               : https://stackblitz.com/edit/angular-png6ca?file=default.html  
 
Regards,  
Pavithra S. 
 


SÇ serdar çelebi February 12, 2019 11:09 AM UTC

thanks for reply.

I used queryCellInfo, i sent color like #111111 but i couldnt create css class in customiseCell functions. i want to set color like args.cell.classList.add('color:#111111'); dynamically

PS Pavithra Subramaniyam Syncfusion Team February 12, 2019 11:41 AM UTC

Hi serdar, 
 
From your query we suspect that you want to set the style for the cell without adding a class to the cell. If yes you can set the style directly by assigning the args.cell.style property. Please refer to the below code example and sample link. 
 
[component.ts] 
customiseCell(args: QueryCellInfoEventArgs) { 
        if (args.column.field === 'Freight') { 
            if (args.data['Freight'] < 80) { 
                args.cell.style.backgroundColor ="greenyellow" ;           // setting style directly 
            }  
        } 
   } 
 
 
Regards,  
Pavithra S. 
 


Loader.
Up arrow icon