Save whole grid data in batch edit mode.

[sachin]

Hi,

I am using gird with batch edit mode and paging. It's working nicely when i save each page data on external button click. But i want to save all the pages data in one go.How can i achieve this. This is how i initialize the grid-

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

                    .Datasource(ds => ds.URL(Url.Action("SpDetailDataSource", "MasterCRUD", null, Request.Url.Scheme)).BatchURL(Url.Action("SpDetailBatchUpdate", "MasterCRUD", null, Request.Url.Scheme)).Adaptor(AdaptorType.UrlAdaptor))

                

                    .IsResponsive()

                    .AllowSorting()

                    .GridLines(GridLines.Horizontal)

                    .PageSettings(page =>

                    {

                        page.PageSize(5);

                    })             

                    .AllowPaging()

                    .ClientSideEvents(eve =>

                    {

                        eve.ActionComplete("complete");

                        eve.ActionFailure("failure");    

                    })

                    .Columns(col =>

                    {

                        col.Field("lno").HeaderText("Department ID").IsIdentity(true).Visible(false).TextAlign(TextAlign.Left).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Width(70).Add();

                        col.Field("documentId").HeaderText("Department ID").IsPrimaryKey(true).Visible(false).TextAlign(TextAlign.Left).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Width(70).Add();

                        col.Field("documentCode").HeaderText("Doc. Code").TextAlign(TextAlign.Left).Add();

                        col.Field("description").HeaderText("Description").TextAlign(TextAlign.Left).Width(70).Add();

                        col.Field("documentNumber").HeaderText("Doc. Number").TextAlign(TextAlign.Left).Width(65).Add();

                        col.Field("issueDate").HeaderText("Issue Date").EditType(EditingType.Datepicker).Format("{0:dd/MM/yyyy}").DateEditOptions(new Syncfusion.JavaScript.Models.DatePickerProperties() { Locale = "en-GB", DateFormat = "dd/MM/yyyy", Select = "dateSelect" }).Width(60).Add();          

                        col.Field("filePath").HeaderText("Doc. Path").Visible(false).Width(60).Add();                      

            )

and these are the action method for data source and batch update-

    public ActionResult SpDetailDataSource(DataManager dm)

        {

            List<SponsorDocumentModel> result = new List<SponsorDocumentModel>();

    

            SponsorMaster master = new SponsorMaster();

            result = master.getSponserDocumentList();

            IEnumerable data = result;

            int count = result.Count;

            DataOperations operation = new DataOperations();

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

            {

                data = operation.PerformSorting(data, dm.Sorted);

            }

            if (dm.Search != null && dm.Search.Count > 0)

            {

                data = operation.PerformSearching(result, dm.Search);

            }

            if (dm.Where != null && dm.Where.Count > 0) //Filtering

            {

                data = operation.PerformWhereFilter(data, dm.Where, dm.Where[0].Operator);

            }

            count = data.Cast<SponsorDocumentModel>().Count();

            if (dm.Skip != 0)

            {

                data = operation.PerformSkip(data, dm.Skip);

            }

            if (dm.Take != 0)

            {

                data = operation.PerformTake(data, dm.Take);

            }

            return Json(new { result = data, count = count }, JsonRequestBehavior.AllowGet);

        }

 public ActionResult SpDetailBatchUpdate(string action, List<SponsorDocumentModel> added, List<SponsorDocumentModel> changed, List<SponsorDocumentModel> deleted, int? key)

        {

            try

            {

             

SponsorDocumentMaster master = new SponsorDocumentMaster();

                if (changed != null)

                {

                    master.update(changed);

                }

                return RedirectToAction("SpDetailDataSource");

            }

            catch (Exception ex)

            {

                throw ex;

            }

        }

Regards,

Sachin 

[Mani Sankar Durai]

Hi Sachin, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and based on your requirement we have prepared a sample that can be downloaded from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/129631/ze/Sample-1004967151 

In this sample we have saved the whole page data after editing the record when clicking the external button using actionBegin and actionComplete event in grid. 

In actionBegin event we have get the changed data this.batchChanges and stored it in global variable using. When we do grid action like paging we have passed the stored data to the batchChanges in the actionComplete event in grid. 

When clicking the external button we have called batchSave() method so that it will pass the whole value to the server side method which we given in BatchUrl property of DataManager. 

Please refer the below code example. 

<button id="btn" onclick="Save()">Click to save changes</button> 

 

    @(Html.EJ().Grid<MvcApplication14.OrdersView>("FlatGrid") 

                            .Datasource(ds => ds.URL("/Grid/Data") 

                              .BatchURL("/Grid/BatchUpdate") 

                            .Adaptor(AdaptorType.UrlAdaptor)) 

                        .ClientSideEvents(eve => eve. ActionBegin("begin") ActionComplete("complete")) 

        .Columns(col => 

... 

        }) 

    ) 

 

 

<script type="text/javascript"> 

    

    var batch = null; 

    function begin(args) { 

        var grid = $("#FlatGrid").ejGrid("instance"); 

        if (args.requestType = "paging") { 

             batch = this.batchChanges; 

        } 

    } 

    function complete(args) { 

        var grid = $("#Grid").ejGrid("instance"); 

        if (args.requestType = "paging") { 

            if ( batch != null) 

                this.batchChanges = batch; 

        } 

    } 

    function Save() { 

        var grid = $("#FlatGrid").ejGrid("instance"); 

        grid.batchSave(); 

     } 

</script> 

 

[GridController.cs] 

  public ActionResult BatchUpdate(List<EditableOrder> added, List<EditableOrder> changed, List<EditableOrder> deleted, int? key) 

        { 

            if (changed != null) 

                OrderRepository.Update(changed); 

            if (deleted != null) 

                OrderRepository.Delete(deleted); 

            if (added != null) 

                OrderRepository.Add(added); 

            var data = OrderRepository.GetAllRecords(); 

            return Json(data, JsonRequestBehavior.AllowGet); 

 

        } 

Refer the documentation link. 

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

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

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

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[sachin]

Hello Manisankar,

Thank you so much for your prompt response, i am glad your solution worked. But i have one more query related to batch edit mode. i want to fill the grid with new data( without clicking on insert button of grid ) from server side and when i click on save it should save whatever data the grid contains. currently i am able to fill the grid with new bulk data but when i click on save button, added , changed and delete parameters of BatchUpdate method are always null since i haven't clicked on insert or edit button of the grid and once i refresh the page all the data will be lost. is it possible with batch edit mode? if yes then please guide me how to fill the grid with new data from server side and save them all.

Regards,

Sachin

[Mani Sankar Durai]

Hi Sachin, 

We have analyzed your query and we suspect that you not pushed the added data to the batchChanges.added in grid. So that those bulk data are not shown in server side when saving the records in grid. When clicking the save button before passing the data to the server we suggest you to push the newly added data in the this.batchChanges.added one by one. Example: if we you five newly added data push the data one by one to the this.batchChanges.added. 

Refer the code example 

function Save() { 

        var grid = $("#FlatGrid").ejGrid("instance"); 

        grid.batchChanges.added.push("//add the new data which is in array"); 

        grid.batchSave();        

Now the newly added data also will include in batchChanges. So that we can able to retrieve the data in server side when saving the record. 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.  

[sachin]

Hi Manisankar ,

Thanks again for the solution, but i faced another issue related to my first issue. As you suggested i am saving changed records to batchChanges object each time user clicks on next page and on save button i pass the object which contains all the changed record of the grid which is working nicely but when i move to next page my previous page changes are not visible and getting replaced with the initial one, could you please tell how do keep the changed data visible to user even after changing the page. This is how i am using the paging in batch edit mode, the DataSource action method is called each time i perform any CRUD operation or change page, So i think the reason is that when i change the page the DataSource action method will be called and new page data will be fetched from databse and the user will only see the new data which has come from database not the one he changed.

public ActionResult DataSource(DataManager dm)

        {     

            List<PayrollDEModel> result = new List<PayrollDEModel>();            

            Generation master = new Generation();

            result = master.getPayrollAdjustmentGridData(model, -1);

            IEnumerable data = result;

            int count = result.Count;

            DataOperations operation = new DataOperations();

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

            {

                data = operation.PerformSorting(data, dm.Sorted);

            }

            if (dm.Where != null && dm.Where.Count > 0) //Filtering

            {

                data = operation.PerformWhereFilter(data, dm.Where, dm.Where[0].Operator);

            }

            if (dm.Search != null && dm.Search.Count > 0)

            {

                data = operation.PerformSearching(result, dm.Search);

            }

            count = data.Cast<PayrollDEModel>().Count();

            if (dm.Skip != 0)

            {

                data = operation.PerformSkip(data, dm.Skip);

            }

            if (dm.Take != 0)

            {

                data = operation.PerformTake(data, dm.Take);

            }       

            return Json(new { result = data, count = count }, JsonRequestBehavior.AllowGet);

        }

Regards,

Sachin 

[Mani Sankar Durai]

Hi Sachin, 

We have analyzed your query and we are able to reproduce the reported issue. Also we have validated and concluded that it is not feasible to achieve the behavior.  

 

When performing batch editing the notification for the particular cell will be shown only when editing in current page (ie.currentViewDate) when moving to next page the cell notification will be removed for the modified cell and the changes are reverted based on the user selected option from the confirmation dialog, it is the default behavior.  

 

To achieve your requirement we can get only the data in batchChanges as we provided in the previous response and it is not feasible to reflect the same changes in grid records once navigated to the next page or doing any action without saving the data.  Hence we suggest you to use the solution provided in the previous update to save the bulk data. 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[sachin]

Hi Manisankar ,

Thanks for the information, i'll go with the first solution u provided me. But i need your help again on the following queries-

1. How to show a custom success dialog box when we save data to database using batchSave method. i tired to put it in ActionComplete() with bacthSave as  requestType but it is getting called every time i reload the page and i want to show only on successful save and failure.
2. How to hide the hover tooltip on grid.
3. How to replace the default loader of grid with custom gif.

Regards, 

Sachin

[Mani Sankar Durai]

Hi Sachin, 

 

Query 1: How to show a custom success dialog box when we save data 

We have analyzed your query and we are not able to reproduce the reported issue. When saving the data we have shown the alert box in actionComplete event in grid when args.request type is “batchSave” and when re-loading the page it doesn’t called the requestType as “batchSave” instead it called as “refresh” 

Refer the code example. 

function complete(args) { 

        var grid = $("#Grid").ejGrid("instance"); 

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

            if (batch != null) 

                this.batchChanges = batch; 

        } 

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

            alert("saved sucess") 

        } 

    } 

function failure(args) { 

        var str = ""; 

        str = args.error.statusText; 

        alert(str); 

 

    } 

If you still face the issue please get back to us with the following details. 

1.       Share the grid code example and the controller page. 

2.       Share the screenshot of the issue 

3.       If possible please reproduce the issue in the simple sample. 

The provided information will help us to analyze the issue and provide you the response as early as possible. 

Refer the KB link: https://www.syncfusion.com/kb/6817/how-to-perform-server-side-validation-in-grid 

To show the dialog use actionComplete or actionFailure event instead of AJAX succees or failure 

Query 2: How to hide the hover tooltip on grid. 

Before proceeding please share us the following details. 

1.       Have you manually set the title attribute for the grid to show tooltip? Is yes then share the code example. 

2.       Share the exact scenario of your requirement. 

3.       Share the screenshot/ video of your requirement. 

 

 

Query 3: How to replace the default loader of grid with custom gif. 

We have already documented regarding how to show custom gif instead of using default loader in grid. 

Refer the documentation link: https://help.syncfusion.com/aspnetmvc/waitingpopup/appearance-and-styling 

Please let us know if you need further assistance. 

 

Regards, 

Manisankar Durai.