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.

Grid CustomSummary With Grouping & Filtering

Thread ID:

Created:

Updated:

Platform:

Replies:

121625 Jan 9,2016 09:26 AM Jan 13,2016 12:02 AM ASP.NET MVC 5
loading
Tags: Grid
Jeffrey Stone
Asked On January 9, 2016 09:26 AM

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 [Syncfusion]
Replied On January 11, 2016 05:33 AM

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
Replied On January 11, 2016 09:13 PM

Worked perfectly! Thanks - Jeff

Ragavee U S [Syncfusion]
Replied On January 11, 2016 11:42 PM

Hi Jeffrey,

Thanks for your update.

We are happy that your requirement is achieved.

Regards,
Ragavee U S

Megatron
Replied On January 12, 2016 08:27 PM

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

thanks


Ragavee U S [Syncfusion]
Replied On January 13, 2016 12:02 AM

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.

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.

;