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

[dan]

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]

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: 

https://www.syncfusion.com/kb/3375/how-to-process-xml-data-from-server-using-datamanager-and-bound-to-grid 

Regards, 

Kasithangam 

[dan]

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]

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