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. Image for the cookie policy date

Change background colour of a row based on value of a field

is it possible to change the background colour of a row in the grid based on the value of one of the fields?

For example if a Boolean field called Enabled = true then use the default background of White and if is false then use a an alternate background of grey.


5 Replies

VA Venkatesh Ayothi Raman Syncfusion Team August 28, 2017 05:41 AM UTC

Hi James, 

Thanks for contacting Syncfusion support. 

We have achieved your requirement using rowDataBound event in Grid. In this event, we can get the every row data details in “args.data” parameter. So, we can change the row background color in using this event as well as based on that corresponding value. Please refer to the following code example and Help documentation for more information, 

Code example: 
<ej-grid id="FlatGrid" datasource="@ViewBag.data" allow-sorting="true" allow-paging="true" row-data-bound="rowDataBound" > 
    . . . 
            <e-column field="OrderID" is-primary-key="true" header-text="Order ID" text-align="Right"></e-column> 
            <e-column field="CustomerID" header-text="Customer ID" edit-type="String"></e-column> 
            <e-column field="EmployeeID" header-text="EmployeeID " edit-type="Dropdown"></e-column> 

[row data bound event] 
function rowDataBound(e) { 
        if (e.data.CustomerID == "VINET") 
            e.row.css("background-color", 'red');//change the row background color based on customerID value 

Help documentation
1)       https://help.syncfusion.com/aspnet/grid/how-to/change-background-color-of-a-row-using-rowdatabound-event 
2)      https://help.syncfusion.com/api/js/ejgrid#events:rowdatabound 

Venkatesh Ayothiraman. 

JW James Wilkinson August 28, 2017 12:16 PM UTC

Thank-you.  That works nicely.


VA Venkatesh Ayothi Raman Syncfusion Team August 29, 2017 04:08 AM UTC

Hi James, 

Thanks for the feedback. 

We are very happy to hear that your requirement is achieved. 

Venkatesh Ayothiraman. 

GU Guadalupe March 6, 2019 06:45 PM UTC

I want do this, but in time of execute. This is possible?

VN Vignesh Natarajan Syncfusion Team March 7, 2019 06:09 AM UTC

Hi Guadalupe, 
Thanks for using Syncfusion products. 
Query: “I want do this, but in time of execute. This is possible?” 
We have provided solution to achieve the requirement (change row background color based on the field value) using row-data-bound event of ejGrid. row-data-bound event will be triggered every time row (tr) in generated. So it is similar to applying styles at time of execution. If above solution does not meet your requirement, kindly share the more details regarding your requirement. Along with the details kindly share the details for “time of execute”.  
Vignesh Natarajan. 

Live Chat Icon For mobile
Up arrow icon