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.
Unfortunately, activation email could not send to your email. Please try again.

Style a row

Thread ID:

Created:

Updated:

Platform:

Replies:

128626 Feb 1,2017 12:52 PM Feb 2,2017 10:07 AM Angular 3
loading
Tags: ejGrid
Zack
Asked On February 1, 2017 12:52 PM

I'm looking for a way to hook into the api and then tell which rows to use the default/alternate row theme?

Zack
Replied On February 1, 2017 01:30 PM

Like this link but in Angular 2

Zack
Replied On February 1, 2017 01:30 PM

https://www.syncfusion.com/forums/117407/how-to-change-style-of-specific-row-in-a-sfdatagrid-control

Venkatesh Ayothi Raman [Syncfusion]
Replied On February 2, 2017 10:07 AM

Hi Zack, 
Thanks for contacting Syncfusion support. 

We can also change the background-color for specific row in Angular 2 grid component using rowDataBound event in Grid. In this event, we can get the row details and row data for each single row. So, we can use this event and check the condition for change the back-ground color to specific row. Please refer to the code example and Help documentation for more information, 
Code example: 
 
@Grid 
<ej-grid #grid  [dataSource]="gridData" [allowPaging]="true"   (rowDataBound)= "rows($event)" > 
  <e-columns>         
         . . . 
     </e-columns> 
 </ej-grid> 
 
export class AppComponent { 
 
     . . . 
        rows(e:any){ 
             
            var rowDetails = e.row; // Get the row 
            //check the condition for specific value 
            if(e.data.EmployeeID == 5) 
                rowDetails.css("background-color", "black").css("color", "white"); // change the BG color for specific rows 
 
        } 
 
        . . . 
 
    } 
 
Screenshot
 
 
 
Regards, 
Venkatesh Ayothiraman. 


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.

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.

;