- Home
- Forum
- JavaScript - EJ 2
- CRUD Operations in Grid
CRUD Operations in Grid
Hi,
I'm trying to integrate the syncfusion functionality to my Laravel app. I can retrieve the data using the WebApiAdaptor adaptor, even without adding the items and count properties on the laravel side as the documentation requests. But as per the documentation, if I want to add the CRUD operations to the Grid I should use the UrlAdaptor adaptor. But I get this error when using the UrlAdaptor.
POST http://localhost/tfmch_DEV/public/api/cseldetail/list_api 405 (Method Not Allowed)
This is my DataManager:
<code>
var DataManager = new ej.data.DataManager({
url: 'http://localhost/tfmch_DEV/public/api/cseldetail/list_api',
UpdateUrl: 'http://localhost/tfmch_DEV/public/api/cseldetail/update_api',
InsertUrl: 'http://localhost/tfmch_DEV/public/api/cseldetail/insert_api',
adaptor: new ej.data.UrlAdaptor(),
// adaptor: new ej.data.WebApiAdaptor(),
offline:true
}, new ej.data.Query().addParams('header_id', '1297'));
</code>
And this is my Laravel API controller.
<code>
Route::get('cseldetail/list_api', function(Request $request) {
$details = CSEL_Detail_vw::where('csel_headers_id', $request->header_id)->get();
$result = [];
$result = [
'result' => $details,
'count' => count($details)
];
return response()->json($result); //<- using this for the UrlAdaptor
//return response()->json($details ); //<- using this for the WebApiAdaptor
});
</code>
Thanks.
SIGN IN To post a reply.
13 Replies
1 reply marked as answer
CD
Christian DAquino
June 9, 2020 02:32 AM UTC
It looks like the DataManager is sending a POST instead of a GET method through the 'url' param. Which is strange but I can work with that. So changing the Laravel route allows me to retrieve the data. Also, I'm not having to add the 'result' and 'count' keys as mentioned on the documentation.
Route::post('cseldetail/list_api',function(Request$request){
$details=CSEL_Detail_vw::where('csel_headers_id',$request->header_id)->get();
returnresponse()->json($details);
});
But, the other CRUD operations are still not being posted. When I change an item on the Grid and click update, the database is not being updated. This is my updateUrl route in Laravel.
Route::post('cseldetail/update_api',function(Request$request){
$details=CSEL_Detail::find(1);
$details->pn=99999;
$details->save();
returnresponse()->json(1);
});
And this is my Grid:
var grid = new ej.grids.Grid({
dataSource: DataManager,
allowPaging: true,
pageSettings: {
pageSize: 20
},
allowResizing: true,
isResponsive: true,
allowSorting: true,
allowMultiSorting: true,
allowFiltering: true,
allowGrouping: true,
allowReordering: true,
groupSettings: {
columns: ['category']
},
editSettings: {
allowEditing: true,
allowAdding: true,
// allowDeleting: true,
// mode: 'Batch',
mode: 'Normal',
newRowPosition:'Top'
},
// cellSave: function() {
// console.log('cellSave');
// },
// actionBegin: "actionBegin",
toolbar: ['Add', 'Edit', 'Update', 'Cancel'],
columns: [
{ field: 'id', isPrimaryKey: true, headerText: 'ID', textAlign: 'Right', width: 50,
validationRules: { required: true, number: true }
},
{ field: 'category', width: 100, headerText: 'Category', type: 'number' },
{ field: 'pn', width: 100, headerText: 'PN', type: 'string' },
{ field: 'srp', headerText: 'SRP', textAlign: 'Right', width: 50, format: 'C' },
{ field: 'work_instruction', headerText: 'Work Instruction', textAlign: 'Right', width: 200, format: 'C' },
{ field: 'status', headerText: 'Release Status', textAlign: 'Right', width: 50, format: 'C' },
{ field: 'location', headerText: 'Location', textAlign: 'Right', width: 50, format: 'C' },
{ field: 'comments', headerText: 'Comments', textAlign: 'Right', width: 200, format: 'C' },
{ field: 'equipment', headerText: 'Equipment', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'client_pn', headerText: 'Client PN', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'ownership', headerText: 'Ownership', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'need_date', headerText: 'Need Date', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'wbs', headerText: 'WBS', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'service_order', headerText: 'Service Order', textAlign: 'Right', width: 80, format: 'C' },
],
actionComplete: actionHandler,
// cellDeselected: function() {
// console.log("cellDeselected");
// },
actionFailure: (e) => {
var span = document.createElement('span');
grid.element.parentNode.insertBefore(span, grid.element);
span.style.color = "#FF0000";
span.innerHTML = "Server exception: 404 Not found";
},
actionSuccess: function(args) {
console.log("actionSuccess");
},
getBatchChanges: function(args) {
console.log("getBatchChanges");
console.log(args);
}
});
MS
Manivel Sellamuthu
Syncfusion Team
June 9, 2020 01:12 PM UTC
Hi Christian,
Greetings from Syncfusion support.
By default URL Adaptor will always use POST request for all actions. We suspect that you are not returning the entire data from the server while adding or updating. Please refer the below documentation for more information.
Please let us know, if you need further assistance.
Regards,
Manivel
Marked as answer
CD
Christian DAquino
June 9, 2020 01:46 PM UTC
Hi Manivel,
Thank you for the your comment. I don't understand what you mean by not returning the entire data from the server. Could you please clarify?
Also, I'm unsure on what this means on the documentation: "and the JSON object must contain a property as
result with dataSource as its value and one more property count with the dataSource total records count as its value"So if my response from the server currently is:
[{id: 1, name: "John"},{id: 2, name: "Jack"}]
Does it means that I have to convert my response from the server into something like?
[
"result": [{id: 1, name: "John"},{id: 2, name: "Jack"}],
"count": 2
]
CD
Christian DAquino
June 9, 2020 01:59 PM UTC
How do I print the server's response to the insert and update methods? It's unclear to me if anything is being sent to the server at all. That would be helpful for debugging,.
MS
Manivel Sellamuthu
Syncfusion Team
June 10, 2020 01:52 PM UTC
Hi Christian,
Thanks for your update.
Query: I don't understand what you mean by not returning the entire data from the server. Could you please clarify?
Yes. We suspect that you are returning only a key from server while updating from the below shared code example.
|
Route::post('cseldetail/update_api',function(Request$request){
$details=CSEL_Detail::find(1);
$details->pn=99999;
$details->save();
returnresponse()->json(1);
}); |
So we suggested to return the entire rowData. For example you are updating a row with the value - {id: 1, name: "John"}, we suggest you to return the same from server after updating. That is what we have mentioned as entire data.
Query: I'm unsure on what this means on the documentation: "and the JSON object must contain a property as result with dataSource as its value and one more property count with the dataSource total records count as its value"
So if my response from the server currently is:
[{id: 1, name: "John"},{id: 2, name: "Jack"}]
Does it means that I have to convert my response from the server into something like?
[
"result": [{id: 1, name: "John"},{id: 2, name: "Jack"}],
"count": 2
]
Yes. While using URL adaptor the response should be in the above highlighted format as you mentioned while requesting the data for initial rendering or paging., etc.(should be in result and count).
Query: How do I print the server's response to the insert and update methods? It's unclear to me if anything is being sent to the server at all. That would be helpful for debugging,
You can refer the network tab requests for the details sent to server and response from the server. Please refer the below screenshots for more information.
Request to server
Response from server:
Regards,
Manivel
CD
Christian DAquino
June 11, 2020 07:50 AM UTC
Hi Manivel,
As I suspected, the UpdateUrl and InsertUrl requests are not being posted to the server. I have attached my js script to this post.
Attachment: script_67c074d4.zip
MS
Manivel Sellamuthu
Syncfusion Team
June 12, 2020 05:33 AM UTC
Hi Christian,
Thanks for your update.
From your shared code we have found that you have enabled offline for URL Adaptor. While enabling offline mode , grid gets all data in the initial rendering and it will act as local data. hence updateUrl and insertUrl requests will not be posted to server. So we suggest you to remove the offline property to get requests to server.
Please let us know, if you need further assistance.
Regards,
Manivel
CD
Christian DAquino
June 12, 2020 07:49 AM UTC
Hi Manivel,
The offline option was just me trying to implement a work around. It feels like there is a discrepancy between the documentation and what I am experiencing, so let me start from the beginning. What I need is:
Requirement: perform CRUD operations to the server
Issue 1: the 'header_id' param is not being posted while executing the DataManager with the new ej.data.Query().addParams method.
Issue 2: regardless of the actions pressed on the tool bar ('add' or 'update') the same incorrect url ('cseldetail/list_api') is being posted, instead of the expected ones: 'cseldetail/update_api' for the UpdateUrl and 'cseldetail/insert_api' for the InsertUrl.
Requirement: after adding a new item through the grid and posting it, I need the returned response from the server to be added to the grid.
Issue: I haven't been able to reproduce this since the CRUD operations - as per above - are not working
Requirement: after modifying an item through the grid and posting it, I need the returned response from the server to update that line on the grid.
Issue: I haven't been able to reproduce this since the CRUD operations - as per above - are not working
Requirement: I have dropdown fields with pairs of 'key' and 'value'. I need the values to be shown as options on the grid, but the key to be posted during the update or insert methods.
Issue 1: I haven't been able to reproduce this since the CRUD operations - as per above - are not working and I can't see any params being posted
Issue 2: After selecting the option on the dropdown and saving the update, a blank value is displayed on the grid instead of the selected value
My scripts are attached and I have exposed my APIs on the web.
Attachment: csel_7e017739.zip
MS
Manivel Sellamuthu
Syncfusion Team
June 15, 2020 01:51 PM UTC
Hi Christian,
Thanks for your update.
Requirement: perform CRUD operations to the server.
Issue 1: the 'header_id' param is not being posted while executing the DataManager with the new ej.data.Query().addParams method.
Issue 2: regardless of the actions pressed on the tool bar ('add' or 'update') the same incorrect url ('cseldetail/list_api') is being posted, instead of the expected ones: 'cseldetail/update_api' for the UpdateUrl and 'cseldetail/insert_api' for the InsertUrl.
We are unable to replicate the issue at our end, could you please provide screenshot or video demonstration of the issue.
Requirement: after adding a new item through the grid and posting it, I need the returned response from the server to be added to the grid.
Issue: I haven't been able to reproduce this since the CRUD operations - as per above - are not working
Requirement: after modifying an item through the grid and posting it, I need the returned response from the server to update that line on the grid.
Issue: I haven't been able to reproduce this since the CRUD operations - as per above - are not working
Requirement: I have dropdown fields with pairs of 'key' and 'value'. I need the values to be shown as options on the grid, but the key to be posted during the update or insert methods.
Issue 1: I haven't been able to reproduce this since the CRUD operations - as per above - are not working and I can't see any params being posted
Issue 2: After selecting the option on the dropdown and saving the update, a blank value is displayed on the grid instead of the selected value
To check the root cause of the issue, we suggest you to bind the beforeDataBound event of the Grid. This event will return the results, before any action data (like Paging, CRUD operations) before bound to Grid.
Regards,
Manivel
CD
Christian DAquino
June 16, 2020 03:54 AM UTC
CD
Christian DAquino
June 16, 2020 04:48 AM UTC
Sorry, another video now showing the header details.
Attachment: Untitled__Jun_16_2020_12_46_PM_ebfb4a50.zip
Attachment: Untitled__Jun_16_2020_12_46_PM_ebfb4a50.zip
CD
Christian DAquino
June 17, 2020 03:24 AM UTC
FYI, I can't seem to reproduce what's on this URL Adaptor: https://ej2.syncfusion.com/javascript/documentation/grid/edit/?_ga=2.40229671.489808563.1592279413-1872603838.1591600297#url-adaptor. It doesn't work.
The CRUD URL seems to work though: https://ej2.syncfusion.com/javascript/documentation/grid/edit/?_ga=2.40229671.489808563.1592279413-1872603838.1591600297#crud-url. It is not as clean as the URL Adaptor - where you theoretically can specify an url for each CRUD method - but at least it works.
MS
Manivel Sellamuthu
Syncfusion Team
June 19, 2020 07:22 AM UTC
Hi Christian,
We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.
Regards,
Manivel
SIGN IN To post a reply.
- 13 Replies
- 2 Participants
- Marked answer
-
CD Christian DAquino
- Jun 9, 2020 02:01 AM UTC
- Jun 19, 2020 07:22 AM UTC