grid cell color dynamic

[serdar çelebi]

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

[Pavithra Subramaniyam]

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> 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/cell/#customize-cell-styles  

 

Sample               : https://stackblitz.com/edit/angular-png6ca?file=default.html  

 

Regards,  

Pavithra S. 

 

[serdar çelebi]

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

[Pavithra Subramaniyam]

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 

            }  

        } 

   } 

 

Sample: https://stackblitz.com/edit/angular-9utbhn-kfsejb?file=default.component.ts  

 

Regards,  

Pavithra S.