DataManager webapi adaptor Offline mode - the GRUD operation not sent data to the server

[ibrahem]

i am use grid in angular app  all work fine add edit delete  but if i activate Offline mode  

the add and edit and delete work locally only the data not sent to the  server  

can help to use  GRUD operation with Offline mode

thanks 

[Venkatesh Ayothi Raman]

Hi Ibrahem, 

Thanks for using Syncfusion products. 

If we set offline mode as true then Grid actions such as paging,filtering,sorting and CRUD operation will perform locally. This is the default behavior of the Grid. As from your query, we suspect that would you like perform the CRUD operation server side and access the other Grid actions locally. If so, we suggest you use the RemoteSaveadaptor to achieve your requirement. This adaptor helps to binding local data and performs all DataManager queries in client-side. Also interacts with server-side only for CRUD operations to pass the modified records.  

So, we have achieved your requirement using Grid load event. In this event, we can fetch the whole data from WebAPI service using AJAX and bound the Grid data source with remoteSave adaptor like as follows, 

[Grid] 

<ejs-grid id="Grid" #grid [dataSource]='data'  

        [editSettings]="edit" (load)="load($event)"  allowPaging='true' [toolbar]="tools" height="240" > 

    <e-columns> 

        . .  . 

    </e-columns> 

 

</ejs-grid> 

 

 

[ts file] 

load(args: any) { 

                

         

        let ajaxObj = new Ajax(); 

        ajaxObj.url = 'api/Orders';  

        ajaxObj.type = 'GET'; 

        ajaxObj.send().then(function (value:any) { 

 

            //bind the Grid data in AJAX success function 

            var gridObject = (<any>document.querySelector("#Grid")).ej2_instances[0]; //grid object 

            var data = JSON.parse(value); 

             

            gridObject.dataSource = new DataManager({ 

                json: data, 

                adaptor: new RemoteSaveAdaptor, //remote save adaptor 

                insertUrl: '/Home/Insert', 

                updateUrl: '/Home/Update', 

                removeUrl: '/Home/Delete' 

            });  

        }); 

 

         

    } 

 

If we use above code example, then performs all DataManager queries in client-side and interacts with server-side only for CRUD operations to pass the modified records. We have also prepared a sample for your convenience which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F1375541595304695 

Help documentation: https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/api-gridComponent.html#load 

After the Download the Sample from this link install the npm packages and Syncfusion packages from following commands in your root directory. 

dotnet restore 

npm install 

npm install @syncfusion/ej2-ng-grids --save 

Now you can run the Integrated ASP core project. 

Regards, 

Venkatesh Ayothiraman. 

[ibrahem]

thanks you for solve my problem

and i have another problem i cannot display message from asp.net core controller  if  GRUD operation falls

i use this 

function failure(args) { 

       console.log(args)

       

    } 

but i receive 

1. [{…}]
1. 0:
1. error:XMLHttpRequest
1. onabort:(...)
2. onerror:(...)
3. onload:(...)
4. onloadend:(...)
5. onloadstart:(...)
6. onprogress:(...)
7. onreadystatechange:(...)
8. ontimeout:(...)
9. readyState:4
10. response:"{"Message":"OrderID must be above 1000","isError":true,"detail":" at ovr.Server.Controllers.api.mdapiController.<AddmedicalCenterall>d__5.MoveNext() in C:\\ovr\\Server\\Controllers\\api\\mdapiController.cs:line 253\r\n--- End of stack trace from previous location where exception was thrown ---\r\n at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()\r\n at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()\r\n at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeActionMethodAsync>d__12.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()\r\n at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeNextActionFilterAsync>d__10.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()\r\n at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Rethrow(ActionExecutedContext context)\r\n at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)\r\n at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeInnerFilterAsync>d__14.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()\r\n at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.<InvokeNextExceptionFilterAsync>d__23.MoveNext()","Errors":null}"
11. responseText:"{"Message":"OrderID must be above 1000","isError":true,"detail":" at ovr.Server.Controllers.api.mdapiController.<AddmedicalCenterall>d__5.MoveNext() in C:\\ovr\\Server\\Controllers\\api\\mdapiController.cs:line 253\r\n--- End of stack trace from previous location where exception was thrown ---\r\n at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()\r\n at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()\r\n at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeActionMethodAsync>d__12.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()\r\n at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeNextActionFilterAsync>d__10.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()\r\n at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Rethrow(ActionExecutedContext context)\r\n at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)\r\n at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeInnerFilterAsync>d__14.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()\r\n at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n at Microsoft.AspNetCore.Mvc.Internal.ResourceInvoker.<InvokeNextExceptionFilterAsync>d__23.MoveNext()","Errors":null}"
12. responseType:""
13. responseURL:"http://127.0.0.1:5000/api/mdapi"
14. responseXML:null
15. status:500
16. statusText:"Internal Server Error"
17. timeout:0
18. upload:XMLHttpRequestUpload {}
19. withCredentials:false
20. __zone_symbol__ON_PROPERTYreadystatechange:ƒ ()
21. __zone_symbol__readystatechangefalse:[ZoneTask]
22. __zone_symbol__xhrListener:ƒ ()
23. __zone_symbol__xhrSync:false
24. __zone_symbol__xhrTask:ZoneTask {_zone: Zone, runCount: 0, _zoneDelegates: null, _state: "notScheduled", type: "macroTask", …}
25. __zone_symbol__xhrURL:"/api/mdapi"
26. __proto__:XMLHttpRequest
2. __proto__:Object
2. length:1
3. __proto__:Array(0)

i need to display only response text

[Venkatesh Ayothi Raman]

Hi Ibrahem, 

Thanks for the update and feedback. 

Yes, we can get the response text from actionFailure arguments. In that arguments, we can get response text from error object value like as follows, 

Code example: 

<ejs-grid #grid [dataSource]='data' (actionFailure)='actionFailure($event)' allowPaging='true' [pageSettings]='pageSettings'> 

        <e-columns> 

. .   . 

        </e-columns> 

    </ejs-grid> 

 

[ts file] 

 

actionFailure(args:any){ 

 

console.log(args.error.responseText); 

 

    }} 

Help documentation: https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/api-failureEventArgs.html 

https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/api-gridComponent.html#actionfailure 

If we misunderstood your requirement, then could you please share more information about your requirement? 

Regards, 

Venkatesh Ayothiraman.