Display Sum of two columns values in another column while Cell Edit in ej grid/treegrid

[Kalai Sirajeddine]

Hi,

I want "Sum" being updated while editing any of "OrderID" or "EmployeeID" in a grid and a treegrid.

editMode: "cellEditing", //editMode: "batch", for grid

CellSave: "CellSave",

{ field: "OrderID", headerText: "OrderID", editType: "numericedit"},

{ field: "CustomerID", headerText: "CustomerID", editType: "stringedit" },

{ field: "EmployeeID", headerText: "EmployeeID", editType: "numericedit" },

{ field: "Sum", headerText: "Sum", editType: "numericedit"},//empty after loading or editing

....

function CellSave(args) {

                        if (args.columnName == "OrderID")

                            args.cell.siblings(".e-Sum").text(args.value + args.rowData.EmployeeID);

                        else if (args.columnName == "EmployeeID")

                            args.cell.siblings(".e-Sum").text(args.value + args.rowData.OrderID);

                    }

Regards,

Kalai Sirajeddine

[Jayakumar Duraisamy]

Hi Kalai, 

In TreeGrid, while saving the row, the “endEdit” client-side event will be triggered along with argument of modified data. Using the data we can sum the values of the two columns and assign it to the sum column field. We should also need to refresh the row dynamically using the “refreshRow” method, since the updated value will not be refreshed in the UI dynamically. 

Please refer the following code snippet, 

$("#TreeGridContainer").ejTreeGrid({ 

endEdit: “updateRecord”, 

}); 

 

Function updateRecord (args){ 

                     

       var data = args.data, 

           updatedRecords = this.model.updatedRecords, 

           index = updatedRecords.indexOf(data), 

           record = updatedRecords[index], 

           sum = data.duration + data.progress; 

         

           record.sum = record.item.sum = sum; 

          this.refreshRow(index); 

         

       }, 

We have also prepared sample. Please refer the sample location as below, 

Sample: http://jsplayground.syncfusion.com/pwhxwskj  

Please refer following documentation to achieve your requirement in Grid. 

KB link: https://www.syncfusion.com/kb/6315/how-to-update-summary-with-unsaved-changes-in-batch-edit-mode  

Please let us know, if you need any other assistance. 

Regards, 

Jayakumar D 

[Kalai Sirajeddine]

Hi Jayakumar,

Thanks for the endEdit, actually I'm already using it to edit in DataBase, just added in the code and all works fine. Thanks

But for the Grid documentation, its asp.net web forms.

Don't know how to write ".ClientSideEvents(eve=>eve.CellSave("cellSave"))" for example , also I found cellsave method way different from the one I proposed last update.

Regards,

Kalai Sirajeddine

[Jayakumar Duraisamy]

Hi Kalai, 

Thanks for the update. 

 

Please find the code example of cellSave event in ASP.NET webform  

 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" runat="server"DetailsTemplate="#tabGridContents" AllowSorting="true">  

        <ClientSideEvents CellSave="cellsave" />  

           <Columns>  

                ----------------------  

           </Columns>  

     </ej:Grid>  

  

---------------------------------------------  

function cellsave(args) {  

        console.log("");  

    }  

 

Regards, 

Jayakumar D