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

Conditional formatting Rows

Hello we are working with Syncfusion MVC Grid we want to conditional formatting rows  (not only the cell, the whole row )

if  column value = 1-10 row background color = blue 
if column value = 11 - 20 row background color = white
if column value > 20 row background color = gray

thank you

7 Replies

BM Balaji Marimuthu Syncfusion Team April 9, 2015 12:28 PM UTC

Hi Yosvany,

Thanks for using Syncfusion Products.

Your requirement is achieved by using the “QueryCellInfo” events in Grid. Please find the sample and code snippet.
Sample: conditionalformatting.zip




. . . . .




function querycellinfo(args) {

if (args.column.field == "OrderID" && args.data.OrderID >= 10251 && args.data.OrderID <= 10260)

$($(args.cell).parent()).css("backgroundColor", "blue");/*custom css applied to the row */

if (args.column.field == "OrderID" && args.data.OrderID >= 10261 && args.data.OrderID <= 10270)

$($(args.cell).parent()).css("backgroundColor", "white");/*custom css applied to the row */

if (args.column.field == "OrderID" && args.data.OrderID > 10270)

$($(args.cell).parent()).css("backgroundColor", "gray");/*custom css applied to the row */



In querycell info event, we have applied the background color to the rows depends on the column values by using css style properties. Please find the knowledge base documentation for more information.
Documentation: http://www.syncfusion.com/kb/2979/how-to-select-or-highlight-rows-based-on-data

Please let us know if you have any queries.

Balaji Marimuthu

YN Yosvany Noda April 9, 2015 01:11 PM UTC

Thank you Balaji everything worked fine.

BM Balaji Marimuthu Syncfusion Team April 10, 2015 11:46 AM UTC

Hi Yosvany,
Thanks for the update.
Please get back to us if you need any further assistance.
Balaji Marimuthu

WT Wayne Taylor June 23, 2017 12:13 PM UTC

How would you use the colours from the Bootstrap CSS. Succes, etc.... ?

PK Prasanna Kumar Viswanathan Syncfusion Team June 26, 2017 03:39 PM UTC

Hi Yosvany, 

Please confirm the following detail, 

1. In this you need to apply colours of bootstrap CSS to the particular row.  

Prasanna Kumar N.S.V 

LA Leif Arne Brekke September 26, 2017 10:46 AM UTC

Hi is this possible to achieve with .NET Core 2?

Edit: Nevermind, I figured it out using rowDataBound as described here: https://www.syncfusion.com/forums/132334/change-background-colour-of-a-row-based-on-value-of-a-field



SA Saravanan Arunachalam Syncfusion Team September 27, 2017 05:49 AM UTC

Hi Leif, 
Yes, it is possible and you can achieve same requirement in Asp.Net Core 2 using row-data-bound event as we mentioned in the forum link. 
Saravanan A.  

Live Chat Icon For mobile
Up arrow icon