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

grid cell color dynamic

Thread ID:

Created:

Updated:

Platform:

Replies:

142590 Feb 11,2019 03:12 PM UTC Feb 12,2019 11:41 AM UTC Angular - EJ 2 3
loading
Tags: Grid
serdar çelebi
Asked On February 11, 2019 03:12 PM UTC

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


serdar çelebi
Replied On 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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 
 


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