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.

Change the HTTP Verb the Datamanager uses and the format sent to the server

Thread ID:

Created:

Updated:

Platform:

Replies:

127001 Oct 20,2016 09:07 AM Oct 24,2016 07:21 AM JavaScript 3
loading
Tags: ejGrid
dan
Asked On October 20, 2016 09:07 AM

I am trying to convert this ajax request to your datamanager format. The backend API I am using is DreamFactory using theOpen Api Specification.
$.ajax({
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: INSTANCE_URL + '/api/v2/db/_table/' + table,
cache:false,
data: params,
method:'GET',
headers: {
"X-DreamFactory-API-Key": APP_API_KEY,
"X-DreamFactory-Session-Token": token
},
success:function (response) {

if (response.hasOwnProperty('resource'))
callback(response.resource);
else
callback(response);
},
error:function (response) {
callback(response);
return false;
}
});
Here is the example datamanager code that I am trying
var APP_API_KEY     = '831337d7d229da23e891e330a56488991dc57703a2892505a4bd1c61697c17e4';
var token = getToken('token');
var INSTANCE_URL =" http://127.0.0.1:81";
var table = 'contact';

var dataManager = ej.DataManager({url: INSTANCE_URL + '/api/v2/db/_table/' + table,
adaptor: new ej.UrlAdaptor(),
cache:false,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
method:'GET',
headers: [{"X-DreamFactory-API-Key": APP_API_KEY,"X-DreamFactory-Session-Token": token}]});

var query = new ej.Query();//leave empty to execute with no params
var execute = dataManager.executeQuery(query) // executing query
.done(function (e) {
$("#table1 tbody").html($("#tableTemplate").render(e.resource));
});
The headers seem to be working fine but the HTTP Verb GET is still using POST. I need to be able to use GET,PATCH,POST,PUT,DELETE.

1) How do I change your POST query using a json object to a GET request transforming the json object to params in the url?

2) How do I transform the json object to a different format that my server is expecting?

Thank you.

Kasithangam C [Syncfusion]
Replied On October 21, 2016 09:05 AM

Hi dan, 
Thanks for contacting Syncfusion support. 
Query1:  How do I change your POST query using a json object to a GET request transforming the json object to params in the url? 
Currently we are processing the HTTP verbs type as “POST” in the DataManager. We can’t change this HTTP verbs type to another with in-built datamanger properties Could you please let us know for what purpose you are trying to port the ajax request functionality to Data manager?  
Query 2:  How do I transform the json object to a different format that my server is expecting? 
To change the format in datamanager, we need to use custom adaptor. For example, if we pass the format as xml instead json, the processResponse has to be overridden to process the xml response from the server. 
We have extended processResponse method of the ej.UrlAdaptor and in the extended method, the xml data from the server is converted into JSON array. We have performed simple Xml to Json conversion in the function “ConvertToJSON”, which will parse the simple xml document to json, in the below code: 
<code> 
<script> 
        //Creating the custom adaptor named xmlAdaptor by extending ejUrlAdaptor 
        var xmlAdaptor = new ej.UrlAdaptor().extend({ 
            processResponse: function (data, ds, query, xhr, request, changes) { 
                return processXML(data.documentElement); 
            } 
        }); 
        //Overriding default processResponse function 
        function processXML(ele) { 
            var json = ConvertToJSON(ele); 
            return { result: json["Order"], count: json["Count"] }; 
        } 
        //Function to convert XML document to JSON object 
        function ConvertToJSON(ele) { 
            var json = {}, e, ch; 
 
            var addItem = function (parent, name, value) { 
                if (!parent[name]) 
                    parent[name] = value; 
                else { 
                    if (parent[name].constructor != Array) 
                        parent[name] = [parent[name]]; 
                    parent[name][parent[name].length] = value; 
                } 
            } 
 
            for (e = 0, ch = ele.childNodes; e < ch.length; e++) { 
                if (ch[e].nodeType == 1) { 
                    if (ch[e].childNodes.length == 1 && ch[e].firstChild.nodeType == 3) 
                        addItem(json, ch[e].nodeName, ch[e].firstChild.nodeValue); 
                    else if (ch[e].childNodes.length != 0) 
                        addItem(json, ch[e].nodeName, ConvertToJSON(ch[e])); 
                } 
            } 
            return json; 
        } 
 
    </script> 
</code> 
Now, we have to pass the custom adaptor in datamanager as shown below code: 
<code> 
<script> 
 
       var forgeryToken = $('[name=__RequestVerificationToken]').val(); 
       var dataManager = ej.DataManager({ 
           url: "GetXMLData", 
           adaptor: new xmlAdaptor(), 
           dataType: "xml", 
           headers: [{ 
               token: forgeryToken 
           }] 
       }); 
 
   </script> 
</code> 
We have prepared the sample based on your requirement and it is available under the following link: 
Sample: Sample 
We have showcased this in the below KB link: 
Regards, 
Kasithangam 


dan
Replied On October 21, 2016 02:46 PM

Query1  I don't understand how your controls are bound, they seem to have to be bound to a datamanger instance.  

My original example was simple and I realize that can just pass the ajax return data to the render function.  I should have used the Grid as a more complex example.

In you Grid/Data Binding/Remote Data example from your docs

		var dm =ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders");
		$("#Grid").ejGrid({
			dataSource: dm,
			allowPaging:true,
			columns: ["OrderID", "EmployeeID", "CustomerID", "ShipCountry", "Freight"]
		});

The above example would allow you to do remote paging or virtual scrolling.

How would I achieve this if I have to use my ajax call instead of a remote datamaneger instance. I understand how to use my ajax return data to create a local datamanager instance, just not one that works both remotely and locally

Thanks

Prasanna Kumar Viswanathan [Syncfusion]
Replied On October 24, 2016 07:21 AM

Hi Dan, 
 
Our Grid control is internally dependent on ejDataManager. On performing grid actions such as paging, the page related information will be passed to the ejDataManager only. Thus, it is not feasible to create a local manager instance(external ajaxPost) on grid and perform server-side paging operations.  
 
If you face any complications with our DataManager, then please get back to us with the details and we will assist you accordingly. 
 
Regards, 
Prasanna Kumar N.S.V 


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.

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.

;