We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid batch editing Save action

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

7 Replies

RU Ragavee U S Syncfusion Team November 16, 2016 06:52 AM UTC

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> 

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

Regards,  
Ragavee U S. 



LJ Laura Jordan November 16, 2016 05:26 PM UTC

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


RU Ragavee U S Syncfusion Team November 17, 2016 09:14 AM UTC

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. 



LJ Laura Jordan November 17, 2016 03:55 PM UTC

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.


RU Ragavee U S Syncfusion Team November 18, 2016 09:41 AM UTC

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. 


Regards, 
Ragavee U S. 



LJ Laura Jordan November 18, 2016 04:07 PM UTC

This solution works perfectly, thanks!!

Best regards!


RU Ragavee U S Syncfusion Team November 21, 2016 05:30 AM UTC

Hi Laura, 
  
Thanks for your update. 
 
We are happy that your requirement is achieved. 
  
Regards, 
Ragavee U S. 


Loader.
Live Chat Icon For mobile
Up arrow icon