MVC grid cellsave event for column calculation

[safeena]

for batch edit mode

2  column value calculation total is not getting on Total field

and also didnot get summary of the column  Total

            function cellSave(args) {

 if(args.columnName=="Qty")

    {

      args.cell.siblings(".e-templatecell").text(args.rowData.Qty * args.rowData.UnitPrice);

    }

    if(args.columnName=="UnitPrice")

    {

     args.cell.siblings(".e-templatecell").text(args.rowData.UnitPrice * args.rowData.Qty);

    }

    

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

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

                    var oldvalue = args.rowData.Total;// 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 == "Total" && this.model.summaryRows[i].summaryColumns[j].summaryType == "sum"){

                                format = !ej.isNullOrUndefined(this.model.summaryRows[i].summaryColumns[j].format) ? this.model.summaryRows[i].summaryColumns[j].format : "{0:N}";//getting the format of the summaryColumn

                                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);

                    summaryval = this.formatting(format,summaryval);//get the formatted value of the summary Value

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

                }

}

//grid 

   

        @(Html.EJ().Grid<ModelBookingDetailsView>("GridEditing")

  

  .Datasource(ds => ds.URL("BatchDataSource").BatchURL("BatchUpdate").Adaptor(AdaptorType.UrlAdaptor)).AllowScrolling()

.EditSettings(edit =>

{

    edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch);

})

.ShowSummary()

 .PageSettings(page =>

 {

     page.PageSize(10);

 })

  .SummaryRow(row =>

  {

      row.Title("Net Total")

                  .SummaryColumns(col =>

                  {

                      col.SummaryType(SummaryType.Sum).DisplayColumn("Total").DataMember("Total").Format("{0:N}").Add();

                  

                  }).Add();

 })

        .ToolbarSettings(toolbar =>

        {

            toolbar.ShowToolbar().ToolbarItems(items =>

            {

                items.AddTool(ToolBarItems.Add);

                items.AddTool(ToolBarItems.Edit);

                items.AddTool(ToolBarItems.Delete);

                items.AddTool(ToolBarItems.Update);

                items.AddTool(ToolBarItems.Cancel);

            });

        })

        //.ScrollSettings(scroll => { scroll.Height("auto").Width(300).VirtualScrollMode(VirtualScrollMode.Normal).EnableVirtualization(true); })

        .Columns(col =>

        {

               col.Field("Qty").HeaderText("Qty").ValidationRules(v => v.AddRule("Qtyrequired", true)).TextAlign(TextAlign.Right).Width(70).Add();

            col.Field("UnitPrice").HeaderText("Unit Price").EditType(EditingType.NumericEdit).Format("{0:N}").NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).TextAlign(TextAlign.Right).Width(90).Add();

            col.Field("Total").HeaderText("Total").Format("{0:N}").Width(90).TextAlign(TextAlign.Right).Add();

          

        })

        .AllowResizing(true)

    .ClientSideEvents(eve => eve.CellSave("cellSave"))

       )

[Venkatesh Ayothi Raman]

Hi Safeena, 

 

Thanks for using Syncfusion products. 

Query #1:” Add the two columns value” 

As from your query, we suspect that do you want to add the two columns and then added value stored into another column by using cellSave event. If so, we suggest you use setCellText and setCellValue to immediately update the value in cellSave event. Please refer to the following code example, 

function cellSave(args) { 

 

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

 

        var newValue = args.value + args.rowData.UnitPrice; 

        var totalcolumnIndex = 2, trElement = $(args.cell).closest('tr'), rowIndex = this.getIndexByRow(trElement); 

        this.setCellText(rowIndex, totalcolumnIndex, newValue);//Update the value in grid tr element 

        this.setCellValue(rowIndex, totalcolumnIndex, newValue); 

 

    } 

 

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

 

        var newValue = args.value + args.rowData.UnitPrice; 

        var totalcolumnIndex = 2, trElement = $(args.cell).closest('tr'), rowIndex = this.getIndexByRow(trElement); 

        this.setCellText(rowIndex, totalcolumnIndex, newValue);//Update the value in grid tr element 

        this.setCellValue(rowIndex, totalcolumnIndex, newValue); 

 

         

    } 

 

      

} 

 

Help documentation:  

https://help.syncfusion.com/api/js/ejgrid#methods:setcelltext 

https://help.syncfusion.com/api/js/ejgrid#methods:setcellvalue 

 

We have built in support to add two columns using template feature in Grid. Please refer to the following UG documentation for more information, 

https://help.syncfusion.com/aspnetmvc/grid/columns#expression-column 

 

Query #2:”Summary row not updated” 

For this query, we suggest you to calculate the summary value using built-in method as named “ej.sum” and updated into summary row “td” cell. Please refer to the following Help documentation and code example, 

Help documentation: https://help.syncfusion.com/js/datamanager/summary 

 

Code example: 

function cellSave(args) { 

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

 

        var newValue = args.value + args.rowData.UnitPrice; 

        var totalcolumnIndex = 2, trElement = $(args.cell).closest('tr'), rowIndex = this.getIndexByRow(trElement); 

        this.setCellText(rowIndex, totalcolumnIndex, newValue);//Update the value in grid tr element 

        this.setCellValue(rowIndex, totalcolumnIndex, newValue); 

 

        var newSummaryValue = ej.sum(this.model.dataSource, "Total"); //Here we can pass the grid data source and Total field name after updating the value 

        $("#" + this._id + " .e-gridSummaryRows").find('td').eq(totalcolumnIndex).text(newSummaryValue); 

    } 

 

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

 

        var newValue = args.value + args.rowData.UnitPrice; 

        var totalcolumnIndex = 2, trElement = $(args.cell).closest('tr'), rowIndex = this.getIndexByRow(trElement); 

        this.setCellText(rowIndex, totalcolumnIndex, newValue);//Update the value in grid tr element 

        this.setCellValue(rowIndex, totalcolumnIndex, newValue); 

 

         

        var newSummaryValue = ej.sum(this.model.dataSource, "Total"); //Here we can pass the grid data source and Total field name after updating the value 

        $("#"+this._id+" .e-gridSummaryRows").find('td').eq(totalcolumnIndex).text(newSummaryValue); 

    } 

 

      

} 

 

Please let us know if you have any further assistance on this. 

 

Regards, 

Venkatesh Ayothiraman.