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.
Unfortunately, activation email could not send to your email. Please try again.

Conditional formatting Rows

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 08:28 AM

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 09:11 AM

Thank you Balaji everything worked fine.

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

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 08:13 AM

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


Prasanna Kumar Viswanathan [Syncfusion]
Replied On June 26, 2017 11:39 AM

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 06:46 AM

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 01:49 AM

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.

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.

;