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
close icon

Grid CustomSummary With Grouping & Filtering

I am trying to create a grid that has a computed summary column that also support grouping & filtering. The custom summary function that I have created works when the grid is NOT grouped. However, it returns NaN when the grid has any groups. How can I get this to work?

Here is the simplified code:

        .Datasource(ds => ds.Json(Model))
        .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
         .SummaryRow(row =>
                 .SummaryColumns(col =>
        .Columns(c =>
            c.Field("TotalSlippageAmount").Format("{0:C2}").TextAlign(TextAlign.Right).HeaderText("Slippage Amount").Add();           
            c.Field("SlippagePercent").Format("{0:P4}").TextAlign(TextAlign.Right).HeaderText("Slippage Percent").Add();           
        }).ClientSideEvents(eve => { eve.QueryCellInfo("formatThumperOrdersCell"); }))

function customSlippagePercentSummary() {
            var gridObj = $("#Orders").ejGrid("instance");
            var totalFillAmount = ej.sum(gridObj.model.currentViewData, "TotalFillAmount");
            var totalSlippageAmount = ej.sum(gridObj.model.currentViewData, "TotalSlippageAmount");
            return totalSlippageAmount / totalFillAmount;

Regards, Jeff

5 Replies

RU Ragavee U S Syncfusion Team January 11, 2016 10:33 AM UTC

Hi Jeffrey,

We have achieved your requirement using the parameter of the customSummary function. Since we have internally passed two parameters(summaryColumn and summaryData) to the custom summary function, we can process the required action using these parameters. Please refer to the below code example.

<script type="text/javascript">


        function calculateFreight(summaryCol, summaryData) {       

            totalFreight = ej.sum(summaryData, "Freight");//summaryData parameter - returns the corresponding dataSource

            totalEmployeeID = ej.sum(summaryData, "EmployeeID");


            return totalEmployeeID / totalFreight;


For your convenience, we have created a sample with the above solution which can be downloaded from the below solution.

Sample Link: http://www.syncfusion.com/downloads/support/forum/121625/ze/Sample406995557

Ragavee U S.

JS Jeffrey Stone January 12, 2016 02:13 AM UTC

Worked perfectly! Thanks - Jeff

RU Ragavee U S Syncfusion Team January 12, 2016 04:42 AM UTC

Hi Jeffrey,

Thanks for your update.

We are happy that your requirement is achieved.

Ragavee U S

ME Megatron January 13, 2016 01:27 AM UTC

Hi, how can I display multiple summary values in the same row and left aligned?


RU Ragavee U S Syncfusion Team January 13, 2016 05:02 AM UTC

Hi Megatron,

Query #1: how can I display multiple summary values in the same row

We can display multiple summary values in same row by defining multiple summary columns under the same summaryRow property of the Grid. Please refer to the below code example.



          . . . .

                .SummaryRow(row =>



                         .SummaryColumns(col1 =>





                                .Prefix("Freight-Sum: ")                             




                         .SummaryColumns(col2 =>





                                .Prefix("EmployeeID-Max: ")




                         .SummaryColumns(col3 =>





                                .Prefix("Freight-Min: ")






        . . . . .


Note that the “DisplayColumn” property of the SummaryColumns to be different with each summaryColumn defined, else the last summary value will be replaced.

Query #2: how can I display summary values left aligned?

The alignment of the summary values depends on the alignment of the corresponding column/field specified in the “DisplayColumn” property of the SummaryColumn. But we can achieve your requirement by explicitly setting style to the summary row element. Please refer to the below code example.


    #Grid .e-summaryrow{

        text-align:left !important;


For your convenience, we have created a sample with the above solutions, which can be downloaded from the following location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/121625/ze/SummaryRow_Sample-2022220546

Ragavee U S.

Live Chat Icon For mobile
Up arrow icon