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.
Unfortunately, activation email could not send to your email. Please try again.

Display summary background color based on value

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 08:25 AM

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 06:38 AM

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

Venkatesh Ayothi Raman [Syncfusion]
Replied On April 20, 2016 12:42 AM

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.

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.

;