Grid batch editing Save action

[Laura Jordan]

Hi,

I am using Syncfusion Grid with batch editing mode and I´m also using the grouping funcionality. The problem is that when I editing one row in one of the groups an then click the save button in the Toolbar, all the groups expands.

 The desire behavior is that all the groups in the grid maaintain their status.

Really appreciate the support,

Thanks

[Ragavee U S]

Hi Laura,  

Thanks for contacting Syncfusion support.  

Query: “If I then edit a row and press save, all the groups expand.”  

  

We created a sample per your code example and we able to face the mentioned behavior. To achieve your requirement, we suggest you to use the ActionBegin and ActionComplete events of ejGrid. In the ActionBegin event we get the expanded group columns.  

In the ActionComplete event we collapse all the rows by using collapseAll() method and expand the particular column by using expandCollapse method.  

Please find the code example and sample:  

@(Html.EJ().Grid<object>("FlatGrid") 

    .Datasource((IEnumerable<object>)ViewBag.datasource) 

    .EditSettings(edit => { edit.AllowDeleting().AllowEditing().EditMode(EditMode.Batch); }) 

    . . . 

    .AllowGrouping() 

    .GroupSettings(group => { group.GroupedColumns(col => { col.Add("ShipCity"); }); }) 

    .ClientSideEvents(eve => { eve.DataBound("dataBound").ActionBegin("edit").ActionComplete("endEdit"); }) 

    )  

<script> 

    function dataBound(args) { 

        var tbarObj = $(args.target), 

        grid = this; 

        grid.collapseAll(); //collapse Grid using grid instance, `this` is grid instance                 

    } 

     

    function edit(args) { 

        if (args.requestType == "batchsave") 

        detailRows = this.element.find(".e-recordplusexpand"); 

    } 

    function endEdit(args) { 

        if (args.requestType == "batchsave") { 

            this.collapseAll(); 

            var collapse = this.element.find(".e-recordpluscollapse"); 

            for (var i = 0 ; i < detailRows.length ; i++) { 

                for (var j = 0 ; j < collapse.length ; j++) { 

                    if ($(collapse[j]).siblings().text() == $(detailRows[i]).siblings().text()) 

                        this.expandCollapse($(collapse[j]).children()); 

                } 

            } 

        } 

    } 

 

</script> 

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Group_Collapse-736857932 

Refer to the Help document for more information on the grid events.   

  

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

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

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

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

Regards,  

Ragavee U S. 

[Laura Jordan]

Thanks, the code works just fine. I have another question, previously I was using the inline edit mode in the Grid and when I was performing the save action through the endEdit function, I update also another Grid in my page whith the data that was updated in the current Grid. This is the code I was using:

@(Html.EJ().Grid<InvoiceData>("PendingInvoices")

             .Datasource(ds => ds.Json((IEnumerable<InvoiceData>)ViewBag.Facturas).BatchURL("BatchUpdateInvoices").Adaptor(AdaptorType.RemoteSaveAdaptor))

             .AllowFiltering()

             .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

             .EditSettings(edit => { edit.AllowEditing().EditMode(EditMode.Batch).ShowConfirmDialog(false); })

             .CssClass("CustomCss")

             .ToolbarSettings(toolbar =>

             {

                 toolbar.ShowToolbar().ToolbarItems(items =>

                 {

                     items.AddTool(ToolBarItems.ExcelExport);

                     items.AddTool(ToolBarItems.Update);

                     items.AddTool(ToolBarItems.Cancel);

                 });

                 toolbar.ShowToolbar(true).CustomToolbarItems(new List<object>() { "Collapse" });

             })

             .AllowTextWrap()

             .AllowGrouping()

             .GroupSettings(group => { group.ShowDropArea(false).GroupedColumns(col => { col.Add("Cliente"); }); })

             .ShowSummary()

             .SummaryRow(row =>

             {

                 row.ShowCaptionSummary(true)

                 .ShowTotalSummary(false)

                .SummaryColumns(col =>

                {

                    col.SummaryType(SummaryType.Sum)

                    .Format("{0:C}")

                    .DisplayColumn("BalanceRemainingHomeCurrency")

                    .DataMember("BalanceRemainingHomeCurrency")

                    .Add();

                }).Add();

                 row.TitleColumn("Cliente").Title("Total:").SummaryColumns(col =>

                 {

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

                     col.SummaryType(SummaryType.Sum).Format("{0:C}").DisplayColumn("BalanceRemaining").DataMember("ForeignOpenBalance").Add();

                 }).Add();

             })

             .Columns(col =>

             {

                 col.Field("Empresa").Visible(false).Add();

                 col.Field("Unidad").Visible(false).Add();

                 col.Field("Year").Visible(false).Add();

                 col.Field("SemDesde").Visible(false).Add();

                 col.Field("SemHasta").Visible(false).Add();

                 col.Field("CambioUSD").Visible(false).Add();

                 col.Field("CambioEUR").Visible(false).Add();

                 col.Field("ForeignOpenBalance").Format("{0:C}").Visible(false).Add();

                 col.Field("Id").IsPrimaryKey(true).Visible(false).Add();

                 col.Field("Cliente").HeaderText("Cliente").Width(31).AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("RefNumber").HeaderText("Factura").Width(29).TextAlign(TextAlign.Center).AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("TxnDate").HeaderText("Fecha").Width(26).TextAlign(TextAlign.Center).Format("{0:dd/MM/yyyy}").AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("DueDate").HeaderText("Vence").Width(28).TextAlign(TextAlign.Center).Format("{0:dd/MM/yyyy}").AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("Terms").HeaderText("Terms").Width(26).TextAlign(TextAlign.Center).AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("Class").HeaderText("Unidad de negocio").Width(45).TextAlign(TextAlign.Center).AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("BalanceRemaining").HeaderText("Importe").Width(38).TextAlign(TextAlign.Center).AllowEditing(false).Format("{0:C}").CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("Currency").HeaderText("Moneda").Width(33).TextAlign(TextAlign.Center).AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("ExchangeRate").HeaderText("Cambio").Width(30).TextAlign(TextAlign.Center).Format("{0:C}").AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("BalanceRemainingHomeCurrency").Width(43).HeaderText("Importe MXN").Priority(2).TextAlign(TextAlign.Center).Format("{0:C}").AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("Clasificacion").HeaderText("Clasificación").Width(41).TextAlign(TextAlign.Center).EditType(EditingType.Dropdown).DataSource((List<object>)ViewData["Clasificacion"])/*.DataSource((IEnumerable<object>)ViewData["DropDownSource"])*/.CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("Memo").HeaderText("Memo").Priority(1).Width(32).TextAlign(TextAlign.Justify).AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Right).Add();

                 col.Field("Aging").HeaderText("Días atraso").Width(30).TextAlign(TextAlign.Center).AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("SemanaCalculada").HeaderText("Semana calculada").Width(34).TextAlign(TextAlign.Center).AllowEditing(false).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("SemanaCompromiso").HeaderText("Semana compromiso").Width(41).TextAlign(TextAlign.Center).EditType(EditingType.Numeric).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("AnnoCobro").HeaderText("Año").Width(25).TextAlign(TextAlign.Center)/*.EditType(EditingType.Numeric)*/.CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

                 col.Field("ObservacionesCobranza").HeaderText("Comentarios").TextAlign(TextAlign.Center).Width(42).EditType(EditingType.String).CssClass("myHeader").HeaderTextAlign(TextAlign.Left).Add();

             })

             .Mappers(map => map.ExportToExcelAction(@Url.Action("ExcelExportInvoices")))

             .ClientSideEvents(eve => { eve.DataBound("dataBound").ActionBegin("begin").BeginEdit("edit").EndEdit("endEdit").ToolbarClick("OnToolbarClick").RecordClick("click"); })

        )

<script> 

function endEdit(args) {

                $.ajax({

                    type: "GET",

                    url: "/InfoFinanciera/TotalesInvoiceUpdate",       //TotalesInvoiceUpdate is Server side method

                    data: args.data, 

                    dataType: "json",

                    success: function (data) {

                        //var genData = ej.DataManager({ json: data, updateUrl: "TotalesUpdate", adaptor: "remoteSaveAdaptor" })

                        var gridObj = $("#Totales").ejGrid("instance");

                        gridObj.dataSource(data);// Datasource bind to grid

                    }

                });

                $("#PendingInvoices").ejWaitingPopup("hide");

                //collapse all groups except de editing one

                this.collapseAll();

                var collapse = this.element.find(".e-recordpluscollapse");

                for (var i = 0 ; i < detailRows.length ; i++) {

                    for (var j = 0 ; j < collapse.length ; j++) {

                        if ($(collapse[j]).siblings().text() == $(detailRows[i]).siblings().text())

                            this.expandCollapse($(collapse[j]).children());

                    }

                }

            }

</script> 

Want I want now is to perform the same update in the other Grid, but this time I need to obtain the list of updated rows to pass this data to the server method. Previously, like is shown in the code I was using args.data to refer the update row.

Can you have any solution to that? Thanks in advance for the support

[Ragavee U S]

Hi Laura, 

Thanks for your update. 

We understand your requirement is to get the modified entities/data in the actionComplete once batchSave is done. We can achieve by fetching data from the batchChanges collection of the grid. 

The batchChanges collection will be updated if any modification such that add/edit/delete is made locally in grid. So, we can get the batchChanges collection in the actionBegin event of the grid when batchSave action is triggered and use that collection within the actionComplete event once the action completes. 

Note: Since in actionComplete event, the batch save action completes successfully, the batchChanges collection will be reverted to default value. So, we need to fetch that value once batch save starts. So we have obtained in actionBegin event. 

Please refer to the below code example. 

<script> 

    var changes = []; 

         

    function edit(args) { 

        if (args.requestType == "batchsave") { 

            changes = this.batchChanges; 

            detailRows = this.element.find(".e-recordplusexpand"); 

        } 

    } 

    function endEdit(args) { 

        if (args.requestType == "batchsave") { 

            //changes - can use this variable which has the update details 

            . . . 

        } 

    } 

 

</script> 

Regards, 

Ragavee U S. 

[Laura Jordan]

Thanks for the info, it has been very helpful. The only thing I am struggling with is when I call the server method in the endEdit function I am getting the parameter data as null. I set this parameter equals to the variable changes.changed assigned in the edit function as you suggest, to get the edited rows in the Grid.

Here is the code:

function edit(args) {

            if (args.requestType == "batchsave")

                changes = this.batchChanges;

                detailRows = this.element.find(".e-recordplusexpand");

        }

        function endEdit(args) {

            if (args.requestType == "batchsave") {

                $.ajax({

                    type: "GET",

                    url: "/InfoFinanciera/TotalesBillsUpdate",  //TotalesBillsUpdate is Server side method

                    data: changes.changed,

                    dataType: "json",

                    success: function (data) {

                        var gridObj = $("#Totales").ejGrid("instance"); // Here I update the other Grid that I have in my page when the changes applied

                        gridObj.dataSource(data); // Datasource bind to grid

                    }

                });

                this.collapseAll();

                var collapse = this.element.find(".e-recordpluscollapse");

                for (var i = 0 ; i < detailRows.length ; i++) {

                    for (var j = 0 ; j < collapse.length ; j++) {

                        if ($(collapse[j]).siblings().text() == $(detailRows[i]).siblings().text())

                            this.expandCollapse($(collapse[j]).children());

                    }

                }

            }

        }

Thanks in advance,

Best regards.

[Ragavee U S]

Hi Laura, 

Thanks for your update. 

We need to pass the stringified data to the controller and handle it in the controller side as List<Classname>. Please refer to the below code example. 

function endEdit(args) { 

        if (args.requestType == "batchsave") { 

            $.ajax({ 

                type: "POST", 

                url: "/Grid/GetData",  //TotalesBillsUpdate is Server side method 

                data: JSON.stringify({ 'order': changes.changed }), 

                contentType: 'application/json; charset=utf-8', 

                dataType: "json", 

                success: function (data) { 

                    alert("success"); 

                    //var gridObj = $("#FlatGrid").ejGrid("instance"); // Here I update the other Grid that I have in my page when the changes applied 

                    //gridObj.dataSource(data); // Datasource bind to grid 

                } 

            }); 

        } 

    } 

 

public ActionResult GetData(List<EditableOrder> order) 

        { 

            return Json(new { data = "sss"}, JsonRequestBehavior.AllowGet); 

        } 

We have modified our previously uploaded sample with the above solution, which can be downloaded from the below location. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ModifiedSample829416838 

Regards, 

Ragavee U S. 

[Laura Jordan]

This solution works perfectly, thanks!!

Best regards!

[Ragavee U S]

Hi Laura, 

  

Thanks for your update. 

 

We are happy that your requirement is achieved. 

  

Regards, 

Ragavee U S.