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

Display summary background color based on value

I've managed to display conditional cell background based on current cell value. How do I extend this for the total summary below ?

3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team April 18, 2016 12:25 PM UTC

Hi Sam,

Thanks for contacting Syncfusion support.

We suggest you to use below workaround for conditional formatting using dataBound event and actionComplete event. We can change the summary value color when summary value is greater than ‘0’. Please refer to the Help document and code example,

Code Example:

$(function () {


            $("#Grid").ejGrid({

               


                dataSource: data,


                allowPaging: true,


                showSummary: true,

                actionComplete:"actionComplete",

                dataBound:"dataBound",

                pageSettings: { pageSize: 11 },


                summaryRows: [{ title: "Min", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Custom, customSummaryValue: Min, displayColumn: "col4" }]},


                  




                ],


                columns: [


                    { field: "Col1", headerText: "Col1", textAlign: ej.TextAlign.Right, width: 70 },


                     { field: "col2", headerText: "col2", textAlign: ej.TextAlign.Left, width: 70 },


                     { field: "col3", headerText: "col3", textAlign: ej.TextAlign.Right, width: 70 },


                     { field: "col4", headerText: "col4", textAlign: ej.TextAlign.Left, width: 70 },


                     { field: "col5", headerText: "col5", textAlign: ej.TextAlign.Right, width: 70 }


                ],


            });


        });


<databound event>


function dataBound(args) {

         

           

            colorChange();


        }


<action complete event>


function actionComplete(args) {



            if (args.requestType == "save" || args.requestType == "batchsave") {


                colorChange(); //Even color summary value color is changed while save the record

            }

        }



function colorChange() {


                var len = this.model.summaryRows.length, customsummaryvalue1 = parseInt($(this.getFooterTable()).find('tr').eq(0).find('td').eq(3).text());

              

 for (var i = 0; i < len; i++) {

                   

if (this.model.summaryRows[i].summaryColumns[0].summaryType == "custom" && customsummaryvalue1 > 1) {


                        $(this.getFooterTable()).find('tr').eq(0).find('td').eq(3).css("color", "red");//change the summary value color


                    }

                    else

                        $(this.getFooterTable()).find('tr').eq(0).find('td').eq(3).css("color", "green");

                }


            }


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

Help document for dataBound: http://help.syncfusion.com/js/api/ejgrid#events:databound
For actionComplete: http://help.syncfusion.com/js/api/ejgrid#events:actioncomplete


If we misunderstood your query then please provide a more detail about that.

Regards,
Venkatesh Ayothiraman.


SK sam kolala April 19, 2016 10:38 AM UTC

This guided me to the right path. Thanks a lot.


VA Venkatesh Ayothi Raman Syncfusion Team April 20, 2016 04:42 AM UTC

Hi Sam,

Thanks for your feedback.

We are happy to hear that your requirement is achieved.


Thanks,
Venkatesh Ayothiraman.

Loader.
Live Chat Icon For mobile
Up arrow icon