Problem with DataSource POST request for Read Operation

Thread is closed for posting
16 posts, 0 answers
  1. Doug Riley
    Doug  Riley avatar
    6 posts
    Member since:
    Jul 2008

    Posted 10 Nov 2011 Link to this post

    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

  2. Rosen
    Admin
    Rosen avatar
    2722 posts
    Member since:
    Sep 2012

    Posted 11 Nov 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  3. Tom
    Tom avatar
    44 posts
    Member since:
    Jun 2007

    Posted 23 Nov 2011 Link to this post

    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
        });

  4. Rosen
    Admin
    Rosen avatar
    2722 posts
    Member since:
    Sep 2012

    Posted 24 Nov 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  5. Tom
    Tom avatar
    44 posts
    Member since:
    Jun 2007

    Posted 24 Nov 2011 Link to this post

    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

  6. Rosen
    Admin
    Rosen avatar
    2722 posts
    Member since:
    Sep 2012

    Posted 25 Nov 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  7. Tom
    Tom avatar
    44 posts
    Member since:
    Jun 2007

    Posted 29 Nov 2011 Link to this post

    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

  8. Rosen
    Admin
    Rosen avatar
    2722 posts
    Member since:
    Sep 2012

    Posted 30 Nov 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  9. Chris
    Chris avatar
    66 posts
    Member since:
    Sep 2008

    Posted 29 Jan 2012 Link to this post

    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

  10. Rosen
    Admin
    Rosen avatar
    2722 posts
    Member since:
    Sep 2012

    Posted 30 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  11. Tom
    Tom avatar
    44 posts
    Member since:
    Jun 2007

    Posted 30 Jan 2012 Link to this post

    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);
        }
    }

  12. Tom
    Tom avatar
    44 posts
    Member since:
    Jun 2007

    Posted 30 Jan 2012 Link to this post

    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()

  13. Chris
    Chris avatar
    66 posts
    Member since:
    Sep 2008

    Posted 30 Jan 2012 Link to this post

    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

  14. David
    David avatar
    2 posts
    Member since:
    Sep 2007

    Posted 10 Feb 2012 Link to this post

    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();


  15. N Mackay
    N Mackay avatar
    150 posts
    Member since:
    Dec 2010

    Posted 24 Sep 2012 Link to this post

    @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.

  16. Jerome
    Jerome avatar
    1 posts
    Member since:
    Jun 2013

    Posted 16 Oct 2013 Link to this post

    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':'admin@mail.com','sPassword':'13123','sUserID':'1539','sClubID':'1'}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (result) {
                                    options.success(result);
                                }
                            });
                        }
                    },

Back to Top