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

grid cell conditional formating with summary value

Thread ID:





120798 Oct 15,2015 01:54 PM UTC Oct 21,2015 10:26 AM UTC ASP.NET Web Forms 5
Tags: Grid
Asked On October 15, 2015 01:54 PM UTC


I've this grid:

I like to do conditional formatting, similar to your example


But the condition of distinccionmust be the the summary row "Promedio" (Average).

For example, in "% Op. Terminadas" column, all cells with cell value greather than 62.92 must be render green and all cell values lower than 62.92 must be red.

But I don't know how get the Summary value promedio with javascript.


Sellappandi Ramu [Syncfusion]
Replied On October 16, 2015 09:36 AM UTC

Hi Manolo,                                    

Thanks for contacting Syncfusion support.

We can change the cell format using actionComplete and dataBound events. We have created a sample based on your requirement and the Grid cells are formatted based on the average value. 

Please refer to the help document for event, 

 In conditional formatting sample, we have used queryCellInfo event to format the Grid cells. But in this solution, we used actionComplete and dataBound evenst to format the cells since the summary row will render after the Grid rows rendered. 

Please find the code example and sample,

    <ej:grid id="FlatGrid" runat="server" allowpaging="True" showsummary="true">


            <ej:SummaryRow Title="Average">


                    <ej:SummaryColumn SummaryType="Average" Format="{0:N}" DisplayColumn="Freight" DataMember="Freight" />                   




        <ClientSideEvents ActionComplete="bound" DataBound="bound" />


            <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" />

            <ej:Column Field="CustomerID" HeaderText="Customer ID" />

            <ej:Column Field="Freight" HeaderText="First Freight" TextAlign="Right" Format="{0:N}" />

            <ej:Column Field="ShipCity" HeaderText="Ship City" />

            <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" />



    <script type="text/javascript">

        function bound(args) {

            if (args.requestType == "paging" || args.type == "dataBound") {

                var summaryElement = this.getFooterTable().find(".e-summaryrow");

                var gridRows = this.getRows();

                var columnIndex = this.getColumnIndexByField("Freight");

                for (var i = 0; i < gridRows.length; i++) {

                    if (parseFloat(gridRows[i].children[columnIndex].innerHTML) <= parseFloat(summaryElement[columnIndex].innerHTML))

                        $(gridRows[i].children[columnIndex]).css("background-color", "red").css("color", "white");

                    else if (parseFloat(gridRows[i].children[columnIndex].innerHTML) > parseFloat(summaryElement[columnIndex].innerHTML))

                        $(gridRows[i].children[columnIndex]).css("background-color", "green").css("color", "white");




Output screen:

Sample: http://www.syncfusion.com/downloads/support/forum/120798/ze/Sample_120798975266599

Sellappandi R

Replied On October 16, 2015 09:58 AM UTC

Thank you!

Sellappandi Ramu [Syncfusion]
Replied On October 19, 2015 04:45 AM UTC

Hi Manolo,

Thanks for the update.

Please get back to us if you have any queries. We are happy to assist you.

Sellappandi R

Replied On October 20, 2015 01:44 PM UTC

Ups, another doubt.

If I want export to excel, Can I export this cell colours and images in the excel file?

Sellappandi Ramu [Syncfusion]
Replied On October 21, 2015 10:26 AM UTC

Hi Manolo, 

We considered this “Export the images in excel file” as an feature and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 



Sellappandi R


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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