Summary template

[Egi Žaberl]

Dear all, 

is it possible to template summary based on sum number?

I want to have red summary if number is below 80, orange if between 80 and 100 and green if over 100.

I want style summary cell or to the whole row.

Regards, Egi

[Seeni Sakthi Kumar Seeni Raj]

Hi Egi, 

 

You can template property of the summaryColumns to format/customize the corresponding summary cells/group summary cells. In the following code example, we have use the jsrender helper functions along the template property to format the Summary cells.  

 

    <div id="Grid"></div> 

    <script type="text/javascript"> 

        function format(value, proxy) { 

            var val = ej.parseFloat(value); 

            if (val < 80) 

                return '<span style="color: red">' + value + '</span>'; 

            if (val >= 80 && val <= 100) 

                return '<span style="color: orange">' + value + '</span>'; 

            if (val > 100) 

                return '<span style="color: green">' + value + '</span>'; 

        } 

 

        $(function () { 

            var helpers = { formatting: format };//helpers 

            $.views.helpers(helpers); 

 

            $("#Grid").ejGrid({ 

                dataSource: window.gridData, 

                allowPaging: true, 

                allowSorting: true, 

                showSummary: true, 

                allowGrouping: true, 

                summaryRows: [ 

                    { 

                        title: "Sum", 

                        summaryColumns: [{ 

                            summaryType: ej.Grid.SummaryType.Sum, 

                            template: "{{:~formatting(#data['summaryValue'])}}", 

                            displayColumn: "Freight", dataMember: "Freight", 

                            format: "{0:C2}" 

                        }] 

                    } 

                ], 

                columns: [ 

                          . ..   

                    { field: "Freight", format: "{0:C}" } 

                ] 

            }); 

        }); 

    </script> 

 

We have also prepared a sample that can be referred from the following jsPlayground. 

 

Sample: http://jsplayground.syncfusion.com/yponudbu 

 

Refer to the following API reference section. 

 

https://help.syncfusion.com/api/js/ejgrid#members:summaryRows-summaryColumns-template 

 

Regards, 

Seeni Sakthi Kumar S. 

[Egi Žaberl]

That is what i want. Thank you for your answer/sample!

Regards, Egi

[Seeni Sakthi Kumar Seeni Raj]

Hi Egi, 

 

We are happy to hear that your query has been resolved. If you require further assistance on this, please get back to us. 

 

Regards, 

Seeni Sakthi Kumar S.