Style a row

[Zack]

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

[Zack]

Like this link but in Angular 2

[Zack]

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

[Venkatesh Ayothi Raman]

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: 

 

Help document: https://help.syncfusion.com/api/js/ejgrid#events:rowdatabound 

 

 

Regards, 

Venkatesh Ayothiraman.