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
close icon

grid cell conditional formating with summary value


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.


5 Replies

SR Sellappandi Ramu Syncfusion Team 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

MA Manolo October 16, 2015 09:58 AM UTC

Thank you!

SR Sellappandi Ramu Syncfusion Team 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

MA Manolo 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?

SR Sellappandi Ramu Syncfusion Team 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

Live Chat Icon For mobile
Up arrow icon