We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Data Binding with remote REST API (Dreamfactory)

Thread ID:

Created:

Updated:

Platform:

Replies:

131781 Jul 27,2017 12:17 AM UTC Jul 27,2017 04:34 PM UTC JavaScript 1
loading
Tags: ejDataManager
Stadelmann Didier
Asked On July 27, 2017 12:17 AM UTC

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

Prince Oliver [Syncfusion]
Replied On 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 






CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;