Conditional formatting Rows

[Yosvany Noda]

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

ex: 

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

[Balaji Marimuthu]

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

@(Html.EJ().Grid<MvcApplication122.Models.Order>("FlatGrid")

.Datasource((IEnumerable<object>)ViewBag.datasource)

.AllowPaging()

. . . . .

.ClientSideEvents(eve=>eve.QueryCellInfo("querycellinfo"))

)

<script>

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 */

}

</script>

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.

Regards,
Balaji Marimuthu

[Yosvany Noda]

Thank you Balaji everything worked fine.

[Balaji Marimuthu]

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

[Wayne Taylor]

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

[Prasanna Kumar Viswanathan]

Hi Yosvany, 

Please confirm the following detail, 

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

Regards, 

Prasanna Kumar N.S.V 

[Leif Arne Brekke]

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

:)

Thanks

[Saravanan Arunachalam]

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. 

Regards, 

Saravanan A.