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

Thread ID:

Created:

Updated:

Platform:

Replies:

131700 Jul 24,2017 11:14 AM UTC Aug 8,2017 12:45 PM UTC ASP.NET Web Forms 4
loading
Tags: Grid
Clement Deturck
Asked On July 24, 2017 11:16 AM UTC

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 !

Clement Deturck
Replied On 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 : 



Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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" /> 
            <Columns> 
 
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" /> 
                <ej:Column Field="Value" HeaderText="Value" Width="100" TextAlign="Right"/> 
                 
            </Columns> 
             
</ej:Grid> 

<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"); 
             
        }         
    </script> 


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. 

Regards, 
Thavasianand S. 


Clement Deturck
Replied On August 7, 2017 09:31 AM UTC

It works very well, thank you.

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


Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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.  
 
Regards, 
Thavasianand S. 


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

;