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.

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: trueheaderText: 'ID'textAlign: 'Right'width: 50,
            validationRules: { required: truenumber: true }
        },
        { field: 'category'width: 100headerText: 'Category'type: 'number' },
        { field: 'pn'width: 100headerText: 'PN'type: 'string' },
        { field: 'srp'headerText: 'SRP'textAlign: 'Right'width: 50format: 'C' },
        { field: 'work_instruction'headerText: 'Work Instruction'textAlign: 'Right'width: 200format: 'C' },
        { field: 'status'headerText: 'Release Status'textAlign: 'Right'width: 50format: 'C' },
        { field: 'location'headerText: 'Location'textAlign: 'Right'width: 50format: 'C' },
        { field: 'comments'headerText: 'Comments'textAlign: 'Right'width: 200format: 'C' },
        { field: 'equipment'headerText: 'Equipment'textAlign: 'Right'width: 120format: 'C' },
        { field: 'client_pn'headerText: 'Client PN'textAlign: 'Right'width: 120format: 'C' },
        { field: 'ownership'headerText: 'Ownership'textAlign: 'Right'width: 120format: 'C' },
        { field: 'need_date'headerText: 'Need Date'textAlign: 'Right'width: 120format: 'C' },
        { field: 'wbs'headerText: 'WBS'textAlign: 'Right'width: 120format: 'C' },
        { field: 'service_order'headerText: 'Service Order'textAlign: 'Right'width: 80format: 'C' },

    ],
    actionComplete: actionHandler,
    //     cellDeselected: function() {
    //         console.log("cellDeselected");
    // },
    actionFailure: (e=> {
        var span = document.createElement('span');
        grid.element.parentNode.insertBefore(spangrid.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

Hi,

Here is a recording.

Attachment: Untitled__Jun_16_2020_11_52_AM_5250931d.zip


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


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 


Loader.
Up arrow icon