Updating Summary Row with Batch Edit

[James]

Hi,

I have a summary row which is basically a "Sum" operation on a grid with EditMode "Batch".

Unfortunately, as I make changes to the grid, the summary row doesn't update until I save the data.

Does anyone have an idea on how I can get the summary row to update as cells are edited?

Any help is appreciated. Thanks.

James

[Ragavee U S]

Hi James,

We have created a sample to update the summary row on editing and saving a cell in batch editing, which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/121227/ze/Sample2024805759

In the above sample, we have pdated the summary row using the CellSave clientside event. Please refer to the below code example.

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >

<ClientSideEvents CellSave="cellSave" />

. . .

<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"EditMode="Batch"></EditSettings>

</ej:Grid>

<script type="text/javascript">

            function cellSave(args) {

                if (args.columnName == "Freight") {

                    var newvalue = args.value;// getting the new value

                    var oldvalue = args.rowData.Freight;// getting the old value

                    var extra = newvalue - oldvalue;//getting the difference in value

                    var summary = ($("td.e-summaryrow")[args.cell.index()].innerHTML).replace(/[$,]/g, "")

                    var summaryval = (parseFloat(summary) + extra).toFixed(2);

                    summaryval = addCommas(summaryval);//add commas to the obtained value

                    $("td.e-summaryrow")[args.cell.index()].innerHTML = "$" + summaryval;//assigning the innerHTML of the summaryrow with updated value

                }

            }          

            </script>

Regards,
Ragavee U S.

[James]

Thanks so much for such a quick response. The solution you have provided works well in the event that I have only 1 summary row but in my project I have 2 summary rows and I only need to update 1. The solution you provided will always only update the first summary record.

I was hoping that I could assign a css class or ID to the summary record that I wanted and then modify the CSS selector in your sample to search based on that new ID/class but it looks like I can't assign a CSS class or ID to the summary row as it only has 4 properties: Title, SummaryColumns, ShowCaptionSummary, and ShowTotalSummary.

If there's a workaround for this that would be great, otherwise I'll just have to rearrange the summary rows so that the Sum row is the first one.

Thanks again.

James

[Ragavee U S]

Hi James,
 
We have modified the solution based on your requirement and the sample can be downloaded from the below location.
 
Sample Link: http://www.syncfusion.com/downloads/support/forum/121227/ze/Sample_modified1674156755
 
In the above sample, we have obtained the corresponding summaryRow index to be modified using Grid model SummaryRows and thus updated that summaryRow. Please refer to the below code example.
 

<script type="text/javascript">

            function cellSave(args) {

                if (args.columnName == "Freight") {

                    var newvalue = args.value;// getting the new value

                    var oldvalue = args.rowData.Freight;// getting the old value

                    var extra = newvalue - oldvalue;//getting the difference in value

                    for (var i = 0; i < this.model.summaryRows.length; i++)

                        for (var j = 0; j < this.model.summaryRows[i].summaryColumns.length; j++) {

                            if (this.model.summaryRows[i].summaryColumns[j].dataMember == "Freight" && this.model.summaryRows[i].summaryColumns[j].summaryType == "sum"){

                                j = i;// finding the summaryRow to be modified

                                break;

                        }

                    }

                    var summary = ($(".e-gridSummaryRows:eq(" + j + ")").find("td.e-summaryrow")[args.cell.index()].innerHTML).replace(/[$,]/g, "")// getting the summaryValue of the corresponding summaryRow

                    var summaryval = (parseFloat(summary) + extra).toFixed(2);

                    summaryval = addCommas(summaryval);//add commas to the obtained value

                    $(".e-gridSummaryRows:eq(" + j + ")").find("td.e-summaryrow")[args.cell.index()].innerHTML = "$" + summaryval;//assigning the innerHTML of the summaryrow with updated value

                }

            }          

 
           </script>

 
Regards,
Ragavee U S.

[James]

Thanks Ragavee, it works perfectly.

[Ragavee U S]

Hi James,

Thanks for your update.

We are happy that your requirement is achieved.

Regards,
Ragavee U S.