grid cell conditional formating with summary value

[Manolo]

Hi,

I've this grid:



I like to do conditional formatting, similar to your example

http://asp.syncfusion.com/demos/web/grid/conditionalformatting.aspx

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.

Thanks

[Sellappandi Ramu]

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, 
http://help.syncfusion.com/js/api/ejgrid#events

Note: 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">

        <SummaryRows>

            <ej:SummaryRow Title="Average">

                <SummaryColumn>

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

                </SummaryColumn>

            </ej:SummaryRow>

        </SummaryRows>

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

        <Columns>

            <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" />

        </Columns>

    </ej:grid>

    <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");

                }

            }

        }
    </script>

Output screen:



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

Regards,
Sellappandi R

[Manolo]

Thank you!

[Sellappandi Ramu]

Hi Manolo,

Thanks for the update.

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

Regards,
Sellappandi R

[Manolo]

Ups, another doubt.

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

[Sellappandi Ramu]

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. 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

Regards, 

Sellappandi R