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 between two cells on the same row

Hi,I've this grid:I like to do conditional formatting, similar to your examplehttp://asp.syncfusion.com/demos/web/grid/conditionalformatting.aspxBut the condition must be: if greater than the value of the previous column for the same row, then the background must be red.For example, in "09" column, two cells with value grather than 'C09' (same row) column must be render red.But I don't know how get the previous cell value with javascript.Thanks !

4 Replies

UN Unknown Syncfusion Team July 24, 2017 11:25 AM UTC

Ok, I tried to formatting my message in edit mode but i can't... 

So, my grid :

And the example : 

TS Thavasianand Sankaranarayanan Syncfusion Team July 25, 2017 04:24 PM UTC

Hi Clement, 

Thanks for contacting Syncfusion support. 

Query 1: Need to do conditional format for column based on the previous column values. 

In this query, we suspect that you want to do conditional formatting the Grid columns based on the previous column values. So, we suggest you to use the queryCellInfo event of ejGrid control. In this event we can get the rowData of Grid in the argument. So, based on this we can set the conditional formatting. 

For an example, we have done set the background color for “Value” column based on the “CustomerID” column value. 

Refer the below code example. 

<ej:Grid ID="OrdersGrid" runat="server" AllowSorting="true" AllowPaging="True" ClientIDMode="Static"> 
    <ClientSideEvents QueryCellInfo="cellinfo" /> 
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" /> 
                <ej:Column Field="Value" HeaderText="Value" Width="100" TextAlign="Right"/> 

<script type="text/javascript"> 
        function cellinfo(args) { 
            if (args.column.field == "Value" && (args.rowData["CustomerID"] < args.rowData["Value"]))  
                $(args.cell).css("background-color", "#397218").css("color", "white"); 

We have prepared a sample and it can be downloadable from the below location. 

Refer the screen shot. 


Refer the help documentation. 

Query 2: I tried to formatting my message in edit mode but I can't. 
In your attached screen shot there is no edit toolbar in Grid. So, what would you expect on this query. 

If we misunderstood your query then please get back to us. 

Thavasianand S. 

UN Unknown Syncfusion Team August 7, 2017 09:31 AM UTC

It works very well, thank you.

I just used "args.data.somedataname" instead of "args.rowData ["somedataname"]"

TS Thavasianand Sankaranarayanan Syncfusion Team August 8, 2017 12:45 PM UTC

Hi Clement, 

We are happy that the problem has been solved. 
Please get back to us if you need any further assistance.  
Thavasianand S. 

Live Chat Icon For mobile
Up arrow icon