RemoteSaveAdaptor not updating table

[Jessica Goodrich]

Hi,

I am trying to figure out how to use the RemoteSaveAdaptor with Batch editing.

My datagrid looks like this:

<div>
                <ejs-grid id="GridWater"
                          toolbar="@(new List<object> {"PdfExport", "ExcelExport", "Add", "Delete", "Update", "Cancel", "Search", "ColumnChooser"})"
                          allowPaging="true"
                          allowFiltering="true"
                          allowExcelExport="true"
                          allowPdfExport="true"
                          allowSorting="true"
                          allowSelection="true"
                          allowTextWrap="true"
                          showColumnChooser="true">
                    <e-grid-filterSettings type="Excel" />
                    <e-grid-editSettings allowAdding="@Model.CanEdit" allowDeleting="@Model.CanEdit" allowEditing="@Model.CanEdit" mode="Batch" showDeleteConfirmDialog="true" />
                    <e-data-manager json="@ViewBag.DataSourceWater" adaptor="RemoteSaveAdaptor" batchUrl="/ObjectiveDataEntry/PotableWaterBatchAddUpdate?objectiveId=@Model.Objective.ObjectiveId"></e-data-manager>
                    <e-grid-columns>
                        <e-grid-column field="ObjectiveId" headerText="ObjectiveId" allowEditing="false" defaultValue="@Model.Objective.ObjectiveId" visible="false" showInColumnChooser="false"></e-grid-column>
                        <e-grid-column field="FiscalYear.Description" headerText="FY" editType="dropdownedit" defaultValue="@currentFiscalYear" edit="new {@params = fiscalYearDropDownList }"></e-grid-column>
                        <e-grid-column field="ReportingPeriod.Description" headerText="Quarter" editType="dropdownedit" defaultValue="@currentReportingPeriod" edit="new {@params = reportingPeriodDropDownList }"></e-grid-column>
                        <e-grid-column field="NmPotableWater.Consumption" headerText="NM" format="N2" editType="numericedit"></e-grid-column>
                        <e-grid-column field="CaPotableWater.Consumption" headerText="CA" format="N2" editType="numericedit"></e-grid-column>
                        <e-grid-column field="NvPotableWater.Consumption" headerText="NV" format="N2" editType="numericedit"></e-grid-column>
                        <e-grid-column field="HaAkPotableWater.Consumption" headerText="HA/AK" format="N2" editType="numericedit"></e-grid-column>
                        <e-grid-column field="CombinedConsumption" headerText="Combined" format="N2" allowEditing="false"></e-grid-column>
                    </e-grid-columns>
                </ejs-grid>
            </div>

It batch updates everything perfectly. But when I return a JSON of the new datasource, it doesn't seem to work. The table reverts back to what existed before the edits/additions of rows.

This is the controller code -- I am returning a json based on the documentation I've read, (seems like this got too long or something so I left out the Added portion):

public IActionResult PotableWaterBatchAddUpdate([FromBody]CRUDModel<PotableWaterGridItem> addUpdateDeletes, int objectiveId)
        {
            if (addUpdateDeletes.Deleted != null)
            {
                foreach (var deleted in addUpdateDeletes.Deleted)
                {
                    var nmPotableWater = deleted.NmPotableWater;
                    nmPotableWater.IsActive = false;
                    var caPotableWater = deleted.CaPotableWater;
                    caPotableWater.IsActive = false;
                    var nvPotableWater = deleted.NvPotableWater;
                    nvPotableWater.IsActive = false;
                    var haakPotableWater = deleted.HaAkPotableWater;
                    haakPotableWater.IsActive = false;

                    _potableWaterService.AddOrUpdatePotableWater(nmPotableWater);
                    _potableWaterService.AddOrUpdatePotableWater(caPotableWater);
                    _potableWaterService.AddOrUpdatePotableWater(nvPotableWater);
                    _potableWaterService.AddOrUpdatePotableWater(haakPotableWater);

                    var statusUpdate = _statusUpdateService.GetStatusUpdateByObjectiveFiscalYearAndReportingPeriod(deleted.ObjectiveId, deleted.FiscalYearId, deleted.ReportingPeriodId);
                    if (statusUpdate != null)
                    {
                        statusUpdate.IsActive = false;
                        _statusUpdateService.UpdateStatusUpdate(statusUpdate);
                    }
                }
            }      

 if (addUpdateDeletes.Changed != null)
            {
                foreach (var changed in addUpdateDeletes.Changed)
                {
                    var fiscalYear = _fiscalYearService.GetFiscalYearByDescription(changed.FiscalYear.Description);
                    var reportingPeriodId = _reportingPeriodService.GetReportingPeriodByDescription(changed.ReportingPeriod.Description);
                    changed.FiscalYearId = fiscalYear.FiscalYearId;
                    changed.ReportingPeriodId = reportingPeriodId.ReportingPeriodId;
                    var nmPotableWater = changed.NmPotableWater;
                    nmPotableWater.FiscalYearId = fiscalYear.FiscalYearId;
                    nmPotableWater.ReportingPeriodId = reportingPeriodId.ReportingPeriodId;
                    var caPotableWater = changed.CaPotableWater;
                    caPotableWater.FiscalYearId = fiscalYear.FiscalYearId;
                    caPotableWater.ReportingPeriodId = reportingPeriodId.ReportingPeriodId;
                    var nvPotableWater = changed.NvPotableWater;
                    nvPotableWater.FiscalYearId = fiscalYear.FiscalYearId;
                    nvPotableWater.ReportingPeriodId = reportingPeriodId.ReportingPeriodId;
                    var haakPotableWater = changed.HaAkPotableWater;
                    haakPotableWater.FiscalYearId = fiscalYear.FiscalYearId;
                    haakPotableWater.ReportingPeriodId = reportingPeriodId.ReportingPeriodId;

                    _potableWaterService.AddOrUpdatePotableWater(nmPotableWater);
                    _potableWaterService.AddOrUpdatePotableWater(caPotableWater);
                    _potableWaterService.AddOrUpdatePotableWater(nvPotableWater);
                    _potableWaterService.AddOrUpdatePotableWater(haakPotableWater);

                    PotableWaterAddOrUpdateStatus(changed);
                }
            }
            var data = _potableWaterService.GetPotableWaterGridItems(objectiveId).ToList();
            return Json(data);
        }

  

The grid is accurate as soon as I refresh the page. So I know the data is getting there accurately. But I do not want to have to refresh the page to show the updated data.

Thanks!

[Manivel Sellamuthu]

Hi Jessica, 

Greetings from Syncfusion support. 

we have validated the provided code example and found that the return data from the BatchUrl method (BatchUpdate) is not in the correct format. 

When using remoteSaveAdaptor with batchUrl , all the CRUD changes needs to be returned back as response. This is demonstrated in the below code snippet, 

public ActionResult BatchUpdate(CRUDModel batchmodel) // get the batch arguments using CRUDModel class 

        { 

            // perform your actions 

 

            return Json(new { added = batchmodel.Added, changed = batchmodel.Changed, deleted = batchmodel.Deleted, value = batchmodel.Value, action = batchmodel.action, key = batchmodel.key }); // return batch arguments with this format to client 

 

        } 

 . . . 

So we suggest you to return the all CRUD changes to resolve the issue. 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Jessica Goodrich]

Thank you Manivel.

I edited my code to your response:

This is the original data in the grid:

This is the changed data:

I see the correct data in the return (Consumption = 654):

But then the grid reverts back to this:

If I refresh the page, it shows the updated data:

Any idea on where else it could be going wrong? Does the batchmodel.value/key need to be set to something? Right now they are showing as null. Or do you have a working example of RemoteSaveAdaptor w/BatchUrl that I could look at?

Thanks!

[Manivel Sellamuthu]

Hi Jessica, 

 

Thanks for your update. 

 

Query: Does the batchmodel.value/key need to be set to something? Right now they are showing as null. 

 

By default in EJ2 Grid the CRUD operation will be based on the primaryKey column. Based on your query we suspect that you have not enabled the Primary Key column for the Grid. 

 

So, we suggest you to define isPrimarykey to anyone column which contains unique value 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#troubleshoot-editing-works-only-for-first-row 

 

Please find the code example 

 

@{ 

    ViewData["Title"] = "Home Page"; 

} 

 

<ejs-grid id="Grid" allowPaging="true"  toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"> 

. . . 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

. . . 

</ejs-grid> 

 

Also We have attached a working sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/157727-remotesaveadaptor-batchurl_-_modified88257687.zip 

 

Screenshot: 

 

Before updating to the server 

 

 

 

In server: 

 

 

 

 

After updating: 

 

 

 

Please let us know, if you need further assistance. 

 

Regards, 

Manivel 

[Jessica Goodrich]

Hi,

Thank you. I tried adding the isPrimaryKey, but still no luck. The code you sent works for me, no problem. The only difference I can see in my application vs the example you sent is that my controller is calling services from another project to do the updating/adding of data. I have trimmed it down and created dummy data for it. Will you take a look at it to see if you can find where I am going wrong?

Thanks!

Attachment: SyncfusionHelp_f27e17ff.7z

[Manivel Sellamuthu]

Hi Jessica, 

 

Thanks for the update 

 

We checked the attached sample and reported issue occurs due to the Serialization problem in the ASP.NET Core 1.0+ framework which is the camel case issue while serializing the JSON Object.  

 

The mentioned issue can be resolved by calling the ContractResolver options in the Startup.cs file for avoiding camel casing conversion during the serialization process. This is demonstrated in below code snippet, 

 

    // This method gets called by the runtime. Use this method to add services to the container. 

       public void ConfigureServices(IServiceCollection services) 

        { 

            // Add App settings to a strongly typed configuration object 

            services.Configure<AppSettings>(Configuration); 

 

            // Create an instance of <AppSettings> so we can get access to strongly typed properties duiring startup. 

            var serviceProvider = services.BuildServiceProvider(); 

            AppSettings = serviceProvider.GetService<IOptions<AppSettings>>(); 

 

            services.AddApplicationServices(Configuration, HostingEnvironment, AppSettings); 

            services.AddMvc().AddJsonOptions(options => 

            { 

                options.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver(); 

            }); 

 

            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1); 

 

        } 

 

After we have included the DefaultContractResolver the Batch updates are working fine in your given sample. 

 

Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionHelp_-_modifed958300751.zip 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#troubleshoot-grid-render-rows-without-data 

 

Please let us know, if you need further assistance. 

 

Regards, 

Manivel 

[Jessica Goodrich]

This worked! Thank you thank you!

Last question (I hope :) ) -- I want my newly added rows to either be at the top of the grid or ordered in the same way the rest of the data it. When I click the add button, the new row appears at the top, but once I click "update" it gets moved to the last record -- sometimes on a second page of data. I think this will make the people using it think it didn't work because they won't know to look for it at the bottom. Is there a way to make it stay at the top/be in the same order as the rest of the data?

[Manivel Sellamuthu]

Hi Jessica, 

Thanks for your update. 

We are glad that the provided solution worked. 

Query: Is there a way to make it stay at the top/be in the same order as the rest of the data? 

 

By default in EJ 2 Grid,  while performing batch edit, we process the added, removed, updated data at once(In a single request).The added records will be updated in the last page of the Grid. It is the default behavior of the Grid. 

So, currently we are checking workaround feasibility of this requirement in grid level. Please confirm can we provide a workaround solution for this requirement.  

Regards, 

Manivel 

[Jessica Goodrich]

Yes, I can use a workaround. Thank you!

[Manivel Sellamuthu]

Hi Jessica, 

Thanks for the confirmation. 

You can achieve your requirement by overriding the insert method of the Json Adaptor in the created event of the Grid. Please refer the below code example for more information, 

<ejs-grid id="Grid" allowPaging="true"  created="created" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"> 

    <e-data-manager json="ViewBag.data" batchUrl="/Home/BatchUpdate" adaptor="RemoteSaveAdaptor"></e-data-manager> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings> 

. . . 

</ejs-grid> 

<script> 

        function created() { 

        ej.data.JsonAdaptor.prototype.insert = function (dm, data, tableName, query, position) { 

// here we are adding the record in the first page of the Grid 

                return dm.dataSource.json.splice(0, 0, data); 

        } 

    } 

</script> 

Please let us know, if you need further assistance. 

Regards, 

Manivel