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

Display summary background color based on value

Thread ID:

Created:

Updated:

Platform:

Replies:

123741 Apr 17,2016 08:38 AM UTC Apr 20,2016 04:42 AM UTC JavaScript 3
loading
Tags: ejGrid
sam kolala
Asked On April 17, 2016 08:38 AM UTC

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

Venkatesh Ayothi Raman [Syncfusion]
Replied On 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.

sam kolala
Replied On April 19, 2016 10:38 AM UTC

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

Venkatesh Ayothi Raman [Syncfusion]
Replied On 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.

CONFIRMATION

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

or the page will be automatically redirected to 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

;