New row displays empty at DataGrid using RemoteSaveAdaptor

[Alex]

Hello!

I'm using .NET 5 and working with DataGrid using RemoteSaveAdaptor. However, when I'm trying to add new row - it reaches controller and I'm able to get actual values and put them in DB, however, after controller work is done - the DataGrid displays just empty line instead of real values. If I refresh page - everything works fine.

I have studied a lot of materials on this forum and around, but no luck. I do have Id column and it is marked as 'isPrimaryKey' and I'm sure that Id is set when I'm returning data back after being added.

My datagrid looks like

<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add","Delete","Cancel" })" actionBegin="begin" >

        <e-data-manager adaptor="RemoteSaveAdaptor" json="@ViewBag.RulesList"

                        removeUrl="Rules/Delete" insertUrl="Rules/Insert"></e-data-manager>

        <e-grid-editSettings allowDeleting="true" showDeleteConfirmDialog="true" allowAdding="true" ></e-grid-editSettings>

        <e-grid-columns>

            <e-grid-column field="Name" headerText="Name" textAlign="Left" width="120"></e-grid-column>

            <e-grid-column field="Description" headerText="Description" allowEditing="true"></e-grid-column>

            <e-grid-column field="IsActive" headerText="Active" displayAsCheckBox="true" textAlign="Center"

                           editType="booleanedit" type="boolean" width="100" allowEditing="true"></e-grid-column>

            <e-grid-column field="Id" headerText="Id" type="number" isPrimaryKey="true" visible="false"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

While Controller:

public IActionResult Insert([FromBody]CRUDModel<Rule> value)

{

using var db = new MFADBContext();

value.Value.OrganizationID = SessionOrganizationID.Value;

value.Value.RuleTypeId = 1;

db.Rule.Add(value.Value);

db.SaveChanges();

//Actually, value.Value.Id is set after saving changes

return Json(value.Value);

}

Maybe I'm missing something obvious? 
Does it looks good with Json serialization that is implemented by .NET platform? Or need to switch to Newtonsoft (not sure what to think)?
Thanks in advance!

[Ajith Govarthan]

Hi Alex, 

Thanks for contacting Syncfusion support. 

Query: I'm using .NET 5 and working with DataGrid using RemoteSaveAdaptor. However, when I'm trying to add new row - it reaches controller and I'm able to get actual values and put them in DB, however, after controller work is done - the DataGrid displays just empty line instead of real values. If I refresh page - everything works fine. 

 

Based on your query you are facing empty line issue when adding new rows with RemoteSaveAdaptor. So, we have prepared sample at our end and found everything works fine at our end without any mentioned issues. For your convenience we have attached the sample, please refer them for your reference. 

Code Example: 

Index.cshtml 

 

 

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

    <e-data-manager json="@ViewBag.dataSource" adaptor="RemoteSaveAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager> 

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

    <e-grid-columns> 

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

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" validationRules="@(new { required= true })" width="120"></e-grid-column> 

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    

   

 

</script> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/remotesave_adaptor889660759.zip 

UG-link: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#remote-save-adaptor 

If you still face the issue, then please ensure that you are using the latest Syncfusion packages in your Grid application. If you use older version of scripts, then please update the packages to latest version. 

Regards, 

Ajith G. 

[Alex]

Hi  Ajith,

Thanks for your response!

Unfortunately I still see the same empty row after I return Json(value.value);

It adds new row to database as expected and I also checked in browser developer mode that endpoint returns pure JSON of the object that was added. But for some reason it is displayed as empty row. If I reload the page - grid will be updated and it would have this row. But when I click 'Add' and insert values - it returns just empty row even though JSON object is being returned from backend.

I have checked your example, it is build using .NET Core 2.0 , my project is built using .NET 5. I also noticed that in Startup.cs of your project you have:

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

In .NET 5 Newtonsoft package is not a default dependency. Could it be the reason? But from another hand, I see a pure JSON string - it should not make difference..

[Ajith Govarthan]

Hi Alex, 

Thanks for the update. 

Query: It adds new row to database as expected and I also checked in browser developer mode that endpoint returns pure JSON of the object that was added. But for some reason it is displayed as empty row. If I reload the page - grid will be updated and it would have this row. But when I click 'Add' and insert values - it returns just empty row even though JSON object is being returned from backend. 

 

Based on your query you are facing new record blank row issue in your Grid application. In our EJ2 Grid we had the same blank row issues in our older version of the Syncfusion packages. So, we suggest you update your packages to latest version to resolve the issue.  

If you still face the issue after updating the packages, then please share the Syncfusion package version and video demonstration of the reported issue to validate further on your query. 

Latest package version: https://ej2.syncfusion.com/aspnetcore/documentation/release-notes/19.2.62/?type=all 

Regards, 

Ajith G. 

[Alex]

I have recorded a video showing that this is the latest Syncfusion control version along with demonstration of how I can capture this issue:

https://ignatusha-my.sharepoint.com/:v:/g/personal/alex_ihnatusha_pro/EVDaNVIeqaFLuhE6OtGe0J4B2wPmdZwXPetOMTFxhCgWWw?e=AHuQkI

Thanks in advance!

[Ajith Govarthan]

Hi Alex, 

Thanks for update. 

Query: I have recorded a video showing that this is the latest Syncfusion control version along with demonstration of how I can capture this issue: 

 

We have checked your attached code example and video demonstration of your sample. So, we have prepared with Remotesave Adaptor and also generated the primarykey values at the server side when you add records in the Grid component. Which works fine at our end and data also added properly without any mentioned issues. 

Index.chtml 

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

    <e-data-manager json="@ViewBag.dataSource" adaptor="RemoteSaveAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager> 

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

    <e-grid-columns> 

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

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" validationRules="@(new { required= true })" width="120"></e-grid-column> 

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

 

    function actionBegin(args) { 

        if (args.requestType === "save" && args.mode === "add") { 

            args.data["OrderID"] = 0; 

        }  

    } 

 

</script> 

HomeController.cs 

   public ActionResult Insert([FromBody]CRUDModel<OrdersDetails> value) 

        { 

            value.value.OrderID = counter+1; 

            OrdersDetails.GetAllRecords().Insert(0, value.value); 

            return Json(value.value); 

        } 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/remotesave_adaptor-446778213.zip 

If you still face the issue, then please share the simple issue reproducible sample to find the root cause of the issue. 

Regards, 

Ajith G. 

[Alex]

Hi Ajith,

Thanks for providing example. I figured out that in your example, which is on .NET Core 2.0 everything works fine. But when I took exactly your cshtml and controller code and put them to .NET 5.0 project - the empty line issue become reproduceable in your code as well. I also updated Syncfusion package to latest possible version, but it did not help as well.

So looks like this is the issue with .NET 5.0 compatibility.

Could you, please, check from your side?

I have also uploaded sample .NET 5.0 project that contains your controller/cshtml code here: https://ignatusha-my.sharepoint.com/:u:/g/personal/alex_ihnatusha_pro/EREpFo3joRNHr6MTEZMZ1r4BjOYgQGPt_h_BGkY2J1XPbw?e=qLVtZY

Thanks in advance for looking into this!

[Ajith Govarthan]

Hi Alex, 

Thanks for the update. 

Query: I figured out that in your example, which is on .NET Core 2.0 everything works fine. But when I took exactly your cshtml and controller code and put them to .NET 5.0 project - the empty line issue become reproduceable in your code as well. I also updated Syncfusion package to latest possible version, but it did not help as well. 

 

We have checked your attached sample and able to reproduce the reported issue at our end. We have validated the attached sample and found that the data sent to the server side is not serialized and deserialized properly. So, to over some this issue we suggest you add Newtonsoft Serialization in startup page of your .NET 5.0 project application. For your convenience we have attached the code example, please refer them for your reference. 

Code Example: 

Index.cshtml 

     public void ConfigureServices(IServiceCollection services) 

        { 

            services.AddControllersWithViews(); 

            services.AddMvc().AddNewtonsoftJson(options => 

            { 

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

            }); 

 

        } 

Reference Link: https://dotnetcoretutorials.com/2019/12/19/using-newtonsoft-json-in-net-core-3-projects/ 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Alex]

Hi  Ajith,

Thanks a lot! That helped. 

Just for anyone who will be looking on the same issue:

1. To do above you would also need to add NuGet package 'Microsoft.AspNetCore.Mvc.NewtonsoftJson'
2. If you run MVC you can do it directly in AddControllersWithViews  at Startup.Configuration:

services.AddControllersWithViews().AddNewtonsoftJson(options =>

            {

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

            });

[Ajith Govarthan]

Hi Alex, 

Thanks for the update. 

We are happy to hear that the provided solution works fine at our end. 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.