How do you set the Summary Row to only sum the rows that are selected?

[Don Pierce]

How can you have a Summary Row to show the Total of a Grid Column Field for only those rows that the user selected? I thought I could do a Summary Row Template and a Javascript function to do this, but I am not having any success. 

Below is my Grid which is bound to a list. I have a Column Field called Area. If a user selects a Row, then the Area for just that Row will appear in the Summary Row. If the user selects 5 rows, the the sum of the Area for those 5 rows will appear in the Summary Row. If the user de-selects one of the 5 rows, then the sum of the Area will show the sum of the remaining 4 rows. Is this possible without using Server Side Code? 

<ej:Grid runat="server" ID="ViewBundlesGrid" AllowScrolling="True" Height="600" Width="700" AllowSelection="true" Selectiontype="Multiple" AllowSorting="false" ShowSummary="true"><ScrollSettings Width="auto" Height="auto" /><SelectionSettings SelectionMode="row"/><Columns><ej:Column Field="Batch" HeaderText="Batch" Width="20%" TextAlign="Left" AllowSorting="false"></ej:Column><ej:Column Field="Bundle" HeaderText="BDL" Width="8%" TextAlign="Right" AllowSorting="false"></ej:Column><ej:Column Field="SheetCount" HeaderText="Sht" Width="8%" TextAlign="Right" AllowSorting="false"></ej:Column><ej:Column Field="Length" HeaderText="Len" Width="15%" TextAlign="Right" AllowSorting="false"></ej:Column><ej:Column Field="Width" HeaderText="Wid" Width="15%" TextAlign="Right" AllowSorting="false"></ej:Column><ej:Column Field="Area" HeaderText="Area" Width="20%" TextAlign="Right" AllowSorting="false"></ej:Column></Columns></ej:Grid>

[Padmavathy Kamalanathan]

Hi Don, 

 

Greetings from Syncfusion support. 

 

Query: How do you set the Summary Row to only sum the rows that are selected? 

 

We have achieved your requirement using custom summary in Grid. Please check the below help documentation, 

https://help.syncfusion.com/aspnet/grid/summary#custom-summary-by-function  

 

Since we need to display summary of only selected row, initially we have returned 0 to the summary row in custom summary function. Then we have calculated the  sum of selected row’s specific column (Freight column) in “rowSelected” event and set it to the summary columns’s innerHTML as shown in the below code snippet. 

 

 

  <ej:Grid ID="FlatGrid" runat="server" Selectiontype="Multiple" 

  AllowPaging="True" AllowSorting="true" AllowFiltering="true" 

  ShowSummary="true"> 

  <ClientSideEvents RowSelected="rowSelected" /> 

  <SelectionSettings SelectionMode="row" /> 

  <SummaryRows> 

      <ej:SummaryRow Title="Area"> 

          <SummaryColumn> 

              <ej:SummaryColumn SummaryType="Custom" CustomSummaryValue="area" 

                  DisplayColumn="Freight" 

                  Format="{0:C2}" /> 

          </SummaryColumn> 

      </ej:SummaryRow> 

  </SummaryRows> 

  <Columns> 

      <ej:Column Field="OrderID" HeaderText="OrderID" IsPrimaryKey="True" TextAlign="Right" Width="75" /> 

      <ej:Column Field="EmployeeID" HeaderText="EmployeeID" TextAlign="Right" Width="75" /> 

      <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" /> 

  </Columns> 

</ej:Grid> 

 

  <script> 

    function area(args, data) { 

        return 0; // returing zero since initially no row will be selected 

    } 

    function rowSelected(args) { 

        if (this.getSelectedRecords().length > 0) { 

            var selectedData = this.getSelectedRecords();  

            var length = this.getSelectedRecords().length; 

            var sum = 0; 

            for (var len = 0; len < length; len++) { 

                sum += selectedData[len].Freight; 

            } 

            $(".e-gridSummaryRows:eq(0)").find("td.e-summaryrow")[2].innerHTML = sum; 

           //  since we are displaying the summary in Freigth column, whose cell index is 2, 

           we have accessed ("td.e-summaryrow")[2] and set the sum value to it's innerHTML 

            //("td.e-summaryrow")[use your actual cell index here] 

        } 

    } 

</script> 

 

 

Whenever we select a row, rowSelected event will be triggered and new calculated value will be updated to summary row. 

 

 NOTE: We have set the innerHTML of cell(td) of 2^nd index since the Display column’s (Freight column) index in a row is 2. Similarly you can use index of your display column. 

 

Please check the below API help documentation, 

https://help.syncfusion.com/api/js/ejgrid#events:rowselected  

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan          

[Don Pierce]

Thank you. I didn't think about combining the Summary Template and the Client Side Events within the grid. That makes sense.

If anyone else should view this topic, please note you do have to parse your sum value or it will just create a long string of the values joined together.

sum += parseFloat(selectedData[len].Area);

[Pon Selva Jeganathan]

Hi Don,   

  

Thanks for the update.    

  

We are glad to hear that query has been resolved by our solution.    

  

Kindly get back to us for further assistance.  

  

Regards,  

Pon selva