Grid CustomSummary With Grouping & Filtering

[Jeffrey Stone]

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:

@(Html.EJ().Grid<ThumperOrderRow>("Orders")
        .Datasource(ds => ds.Json(Model))
        .AllowFiltering(true)
        .AllowGrouping(true)
        .AllowSorting(true)
        .AllowTextWrap(true)
        .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
        .ShowColumnChooser()
         .SummaryRow(row =>
          {
              row.ShowTotalSummary(true)
                 .SummaryColumns(col =>
                 {
                     col.SummaryType(SummaryType.Custom)
                        .DisplayColumn("SlippagePercent")
                        .CustomSummaryValue("customSlippagePercentSummary")
                        .Format("{0:P4}")
                        .Add();
                 }).Add();
          })
        .Columns(c =>
        {
            c.Field("AccountName").HeaderText("Acct").Add();
            c.Field("Symbol").HeaderText("Symbol").Add();
            c.Field("TotalFillAmount").Format("{0:C2}").TextAlign(TextAlign.Right).HeaderText("Fill").Add();           
            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

[Ragavee U S]

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;

    }
</script>

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

Regards,
Ragavee U S.

[Jeffrey Stone]

Worked perfectly! Thanks - Jeff

[Ragavee U S]

Hi Jeffrey,

Thanks for your update.

We are happy that your requirement is achieved.

Regards,
Ragavee U S

[Megatron]

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

thanks

[Ragavee U S]

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.

@(Html.EJ().Grid<object>("Grid")

       

          . . . .

                .SummaryRow(row =>

                  {

                      row.ShowTotalSummary(true)                         

                         .SummaryColumns(col1 =>

                         {

                             col1.SummaryType(SummaryType.Sum)

                                .DisplayColumn("Freight") 

                                .DataMember("Freight")

                                .Prefix("Freight-Sum: ")                             

                                .Format("{0:C2}")                               

                                .Add();

                         })

                         .SummaryColumns(col2 =>

                         {

                             col2.SummaryType(SummaryType.Maximum)

                                .DisplayColumn("EmployeeID")

                                .DataMember("EmployeeID")

                                .Prefix("EmployeeID-Max: ")

                                .Format("{0:N0}")

                                .Add();

                         })

                         .SummaryColumns(col3 =>

                         {

                             col3.SummaryType(SummaryType.Minimum)

                                .DisplayColumn("CustomerID")

                                .DataMember("Freight")

                                .Prefix("Freight-Min: ")

                                .Format("{0:C2}")                               

                                .Add();

                         }).Add();

                     

                  })

        . . . . .

       )

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.

<style>

    #Grid .e-summaryrow{

        text-align:left !important;

    }
</style>

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

Regards,
Ragavee U S.