1. Home
  2. Forum
  3. jQuery
  4. Data Binding with remote REST API (Dreamfactory)

Data Binding with remote REST API (Dreamfactory)

Hello,

First, let me thank you for providing this wonderful product.

I need to connect a javascript ejGrid with a remote Dreamfactory API server (https://www.dreamfactory.com). According to your documentation, this seems to be a question of minutes. I must be pretty bad, because I think a already tried for 30 hours now without much success. I think that your documentation is really incomplete re remote binding ! Therefore, I decided to ask for your help...

The Dreamfactory REST API is very easy and clear to connect to and CRUD data. 

a) Create a new user session, by sending a POST to /user/session with an object containing "email, password, duration" in the body.

After having tried a few hours with a datamanager without success, I decided to go for a direct $.ajax request, which is now working and bringing back the needed session_token.

$.ajax(dreamfactoryConnection.loginUrl, {
    method: "POST",
    contentType: "application/json",
    data: JSON.stringify(credentials),
    success: function(response){
         //...
    },
    error: function(e){
        //...
    }
}); 

b) CRUD data from the Dreamfactory API :
 
The Dreamfactory API is very well structured and clear :
- To retrieve one or more records, send a GET request to _table/{table_name}
- To delete one or more records, send a DELETE request to _table/{table_name} with the body containing the ids to delete.
- To update one or more records, send a PATCH request to _table/{table_name} with the body containing a single record containing name-value pairs of fields to update.
- To create one or more records, send a POST request to _table/{table_name} with the body containing name-value pairs of records to create.
- To replace one or more records, send a PUT request to _table/{table_name} with the body containing name-value pairs of records to update.

The header of all requests must contain the session_token and apikey in the header, and if a body is requested (all except GET), then the data has to be encapsulated inside a "resource" array { "resource": [ { "id": 0 } ] }

I am able to fetch data from Dreamfactory through an ej.UrlAdaptor, where I modifiy the response and update the verb "POST" into "GET", but I cannot achieve to create, update and delete data. I need your help...

Here is my code :

     var method = "read";

    var myCustomAdaptor = new ej.UrlAdaptor().extend({
        processResponse: function (data, ds, query, xhr, request, changes) {
            response = {
                count : data.resource.length,
                result: data.resource
            };
            return response;
        },
        beforeSend: function (request, settings) {
            settings.setRequestHeader("X-DreamFactory-Api-Key", dreamfactoryConnection.apikey);
            settings.setRequestHeader("X-DreamFactory-Session-Token", dreamfactoryConnection.session_token );
            if (method == "read"){
                settings.setRequestHeader("X-HTTP-METHOD", "GET");
            } else if (method == "delete"){
                settings.setRequestHeader("X-HTTP-METHOD", "DELETE");
            } else if (method == "update"){
                settings.setRequestHeader("X-HTTP-METHOD", "PATCH");
            } else if (method == "create"){
                settings.setRequestHeader("X-HTTP-METHOD", "POST");
            } else if (method == "replace"){
                settings.setRequestHeader("X-HTTP-METHOD", "PUT");
            } else {
                settings.setRequestHeader("X-HTTP-METHOD", "GET");
            };
        }
    });

    var myDataManager = ej.DataManager({
        url: "http://.../_table/tb_articles",
        crossDomain: true,
        adaptor: new myCustomAdaptor()
    });

    var myGrid = $("#ArticleGrid").ejGrid({
        dataSource: myDataManager,
        columns: [
           ...
        ],
        actionFailure: function(args) {
            alert(args.error.status + " : " + args.error.statusText);
        },
        allowPaging: true,
        allowFiltering: true,
        allowSorting: true,
        allowResizing: true,
        editSettings: { allowEditing: true },
        actionBegin: function (args){
            if(args.requestType == "save"){
                method = "update"
            }
        }
    });

Thanks in advance to give me a working solution.
Best regards.
Didier

1 Reply
PO Prince Oliver Syncfusion Team July 27, 2017 04:34 PM UTC

Hi Stadelmann, 

Thank you for contacting Syncfusion support. 

To use CRUD operations with DataManager, kindly refer to the following KB link: https://www.syncfusion.com/kb/3381/how-to-save-data-in-server-while-batch-editing-is-enabled 

Kindly refer to the following UG link: https://help.syncfusion.com/js/datamanager/cruddataoperations 

Also check our RemoteSaveAdaptor for CRUD operations: https://help.syncfusion.com/js/datamanager/data-adaptors#remotesave-adaptor 

Regards, 
Prince 






Loader.
Up arrow icon