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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Conditional formatting Rows

Thread ID:

Created:

Updated:

Platform:

Replies:

118765 Apr 8,2015 01:56 PM UTC Sep 27,2017 05:49 AM UTC ASP.NET MVC 7
loading
Tags: Grid
Yosvany Noda
Asked On April 8, 2015 01:56 PM UTC

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 [Syncfusion]
Replied On 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


@(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
Replied On April 9, 2015 01:11 PM UTC

Thank you Balaji everything worked fine.

Balaji Marimuthu [Syncfusion]
Replied On April 10, 2015 11:46 AM UTC

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

Wayne Taylor
Replied On June 23, 2017 12:13 PM UTC

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


Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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.  

Regards, 
Prasanna Kumar N.S.V 


Leif Arne Brekke
Replied On 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

:)

Thanks


Saravanan Arunachalam [Syncfusion]
Replied On 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. 
Regards, 
Saravanan A.  


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.

Warning Icon 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.Close Icon

;