Problem with DataSource POST request for Read Operation

[Doug Riley]

I am calling a WCF webservice which exposes a POST method for login (returns user data if successful).  When I make the call via jQuery Ajax it works as expected, but when I make the equivelant Kendo UI DataSource call it fails.  Here are the basics:

VARIABLES USED IN THE SAMPLE CODE:
jsonData = {"userName":"abc123","password":"abc123"}
url = "../Authentication.svc/Login3"

KENDO CALL (fails):
---------------------
var dataSource = new kendo.data.DataSource({
    transport: {
               read: {
                       url: url,
                       dataType: "json",
                       data: jsonData,
                       type: "POST",
                       contentType: "application/json",
                       processData: false
                     }
               }
});

REQUEST PAYLOAD AS SHOWN IN NETWORK TAB OF CHROME DEBUGGER:
[object Object]
RESULT: 400 - Bad Request
------------------------------------------

AJAX CALL (works!):
-----------------
$.ajax({
         url: url,
         type: "POST",
         contentType: "application/json",
         data: jsonData,      
         processData: false,  
         dataType: "json"    
 });

REQUEST PAYLOAD AS SHOWN IN NETWORK TAB OF CHROME DEBUGGER:
{"userName":"abc123","password":"abc123"}
RESULT: 200 - Successful

Any ideas or assistance would be appreciated.

Doug

[Rosen]

Hi Doug Riley,

I'm afraid that I'm not sure what may be the cause for the behavior you have described. Therefore, providing a small sample in which this can be observed locally will be appreciated.

Regards,
Rosen
the Telerik team

[Tom]

I'm having what I think is the same problem. I think the problem is to do with how to pass JSON arguments to the web service. In my case the datasource is currently embedded in a grid, but it amounts to the same thing. The args are also split out for debugging.

The problem is that the data argument seems to expect something like "data {supplierName: searchtext}", which it then passes through as "suppliername=xxx" to the call. But if your service is written as a WCF service that expects JSON arguments, as mine is, then it doesnt work. The standard Ajax call works fine, and passes json data.

So I too need to work out how to do this, otherwise I'll be forced to rewrite my services.

Datasource calling:
-------------------------
   postArgs = new Object(); 
   postArgs.supplierName = searchtext;
   postData = JSON.stringify(postArgs);

$("#supplierSearchResult").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        type: "POST",
                        url: "../cccs/service.svc/SupplierSearch",
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        data: postData
                    }
                },
                schema: {
                    data: "SupplierSearchResult.SupplierList",
                    type: 'json'
                }
            }
  });

Ajax Calling
----------------
$.ajax({
        type: "POST",
        url: "../cccs/service.svc/SupplierSearch",
        data: JSON.stringify(postArgs),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        processdata: false
    });

[Rosen]

Hi Tom,

If this is the case you may use the parameterMap options of the transport to transform the data to a different format send to the server:

$("#supplierSearchResult").kendoGrid({
    dataSource: {
        transport: {
            read: {
                type: "POST",
                url: "../cccs/service.svc/SupplierSearch",
                contentType: "application/json; charset=utf-8",
                dataType: 'json'
            },                  parameterMap: function(options, operation) {                                                           // note that you may need to merge that postData with the options send from the DataSource                        return JSON.stringify(postData);                                                  }
        },
        schema: {
            data: "SupplierSearchResult.SupplierList",
            type: 'json'
        }
    }
});

Regards,
Rosen
the Telerik team

[Tom]

Hi Rosen,

Thanks for your reply. I tried adding a parameterMap as you suggested, but it doesnt seem to make any difference to me. In fact if I set a breakpoint inside the function it doesnt seem to get hit at all.

I'm using Fiddler to look at whats getting passed, and I can see quite clearly my data when I use the Ajax call, but nothing if I try the Datasource. If I use normal Data:{Suppliername: sometext} then I can see the data in the post. But nothing if I try the parameterMap as you've suggested.

Is there a working example of this? I couldnt actually find parameterMap documented anywhere.

Tom

[Rosen]

Hi Tom,

Could you please verify that you are using latest (BETA2) version of KendoUI? 
Please take a look at the following jsfiddle page, although it does not do much, it will show the usage of parameterMap function.

All the best,
Rosen
the Telerik team

[Tom]

Thanks Rosen,

I looked at the jsfiddle page, and played around with it to add JSON.stringfy, tried adding a data:{} argument to the read, a few other things, but I still could not see anything appear in the post. If I take out the parameter map I can clearly see the data being posted.

And yes I have the latest beta - if we can get it working in a fiddle page then I'm sure I can do the rest.

Tom

[Rosen]

Hello Tom,

In order to actually post the changed data it should be return from the parameterMap function, as I have showed in the code snipped provided earlier. Here is a modified version of the jsfiddle page with a return statement.

Regards,
Rosen
the Telerik team

[Chris]

Hi Telerik,

It's been two monhs, have you guys gotten this working yet or can you give a status update on this?  Or was there a way that anyone figured out how to do this?  Can you provide any real working examples of this?

It also doesn't work for me either, basically, exact same jquery .ajax code does not pass the parameters.  I tried using the parameter map as well and nothing is coming in parameter-wise.

Please advise!

Thanks,
Chris

[Rosen]

Hello Chris,

I'm not sure to which issue you are referring to for a status update. The jsFiddle test pages posted in my previous replies provide a guidance on how to implement the required functionality. Did you try to use the demonstrated approach? Maybe you could provide a small sample which demonstrates the issue you are having.

Regards,
Rosen
the Telerik team

[Tom]

I never got this working either. Even the latest JSFiddle page appears to pass the parameters as foo=bar. At least thats what I can see in the console pane. I might be looking at it wrongly.

I went back to basic ajax query. All was simple enough and I didnt have the time to chase the other way any more.

This is how mine works, with the result set ending up in a datasource, and displayed in a grid. As usual there are lots of different ways all these things can be combined, but this works well enough for me.

var supplierSearchDataSource;

var searchInput;

var selectedSupplierID;

 

function SupplierSearch_Click()

{

    var searchtext = "";

    searchtext = $("#supplierNameSearch").val();

    if (searchtext == '')

    {

        alert('Please enter a name to search for.');

        return;

    }

    var args = new Object();

    args.supplierName = searchtext;

    $.ajax({

        type: "POST",

        url: "../cccs/service.svc/SupplierSearch",

        data: JSON.stringify(args),

        contentType: "application/json; charset=utf-8",

        dataType: "json",

        processdata: false,

        success: function (msg)

        {

            if (msg.SupplierSearchResult.HasError)

            {

                alert(msg.SupplierSearchResult.Message);

                return;

            }

            DisplaySupplierSearchResult(msg);

        },

        error: ServiceFailed

    });

}

 

function DisplaySupplierSearchResult(result)

{

    if (!searchResultsInitialised)

    {

        supplierSearchDataSource = new kendo.data.DataSource({ data: result.SupplierSearchResult.SupplierList });

 

        searchGrid = $("#supplierSearchResult").kendoGrid({

            dataSource: supplierSearchDataSource,

            columns: [

                  {

                      field: "ID",

                      title: "ID",

                      width: "0px"

                  },

                  {

                      field: "MerchantName",

                      title: "Supplier"

                  },

                  {

                      field: "MerchantAddress",

                      title: "Address"

                  }

            ],

            scrollable: true,

            selectable: true,

            change: onSupplierSearchChange

        });

        searchResultsInitialised = true;

    }

    else

    {

        supplierSearchDataSource.data(result.SupplierSearchResult.SupplierList);

    }

}

[Tom]

I went back to the jsfiddle page, and updated it to look like the following. Appeared to at least post correctly. Havent tested further than that but might work.

var args = new Object();

args.foo = "bar";

 

new kendo.data.DataSource({

    transport: {

            read: {

                type: "POST",

                url: "../cccs/service.svc/SupplierSearch",

                contentType: "application/json; charset=utf-8",

                dataType: 'json'              

            },

            parameterMap: function(options, operation) {                                       

               // note that you may need to merge that postData with the options send from the DataSource

                 console.log(options);

                 

                 return JSON.stringify(args);     

                 //return $.extend({}, options, {foo: "bar"});                    

              }

        },

        schema: {

            data: "SupplierSearchResult.SupplierList",

            type: 'json'

        }

}).read()

[Chris]

Hi all,

I couldn't get it to work and it wasn't worth it for me to keep hammering my head against a wall to do a POST, so I converted my web services to GETs which is really the better practice anyway, and that seems to work much better with Kendo.

I know Kendo is trying to stay server-side agnostic, but guys like Paypal and Authorize.net have sample code for different languages and that would be an extremely helpful resource (maybe post March when Telerk has more time?) to put together.  One of the best things about Telerik is the support, documentation, and code samples, but Kendo being so new, is still on short supply in that area.

I miss the search bar for the forums too which makes it faster for me to find what I'm looking for (instead of just the site search on top).

That being said, after getting this going with GET, I do like what will be a much faster integration the second time around and think that Kendo/Telerik is putting out something that is going to be really great.

Chris

[David]

Hi guys,

Just adding that I was using a standard jQuery AJAX call which used POST (for reasons I understand with size/security of posted values? anyway..).

So I am using JSON as the transport mechanism, and actually just an ASHX page which uses a streamreader to get the posted vals.
Anyway, I can confirm the following Kendo datasource works:

       var kds = new kendo.data.DataSource({
        transport: {
            read: {
                type: "POST",
                url: "/AJAXservices/Members/GetMemberData.ashx",
                contentType: "application/json; charset=utf-8",
                dataType: 'json'
            },
            parameterMap: function (options) {
                return JSON.stringify({ process: 'getcachedcontacts' });
            }
        }
    });


    //  Now read the actual data which has been defined above
    kds.read();

[N Mackay]

@Tom

Thanks for posting your workaround, I couldn't get this working either with a WCF restful service and POST and a single parameter. That workaround works fine and it's relatively easy to refactor the code for this approach.

[Jerome]

Hi,

I encountered the same problem today, and found the real solution here. You just have to wrap the call to $.ajax (or your service reference call into the read function)

http://www.icenium.com/resources/forums/kendoui-mobile-/kendo-ui-datasource-json-issue

transport: {
                    read: function(options) {
                        $.ajax({
                            type: "POST",
                            url: "http://sdk.domain.com/services/general.asmx/GetPendingActions",
                            data:  "{'sUsername':'[e-mail]','sPassword':'13123','sUserID':'1539','sClubID':'1'}",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (result) {
                                options.success(result);
                            }
                        });
                    }
                },