Using $.ajax vs kendo.data.DataSource

2 posts, 0 answers
  1. Chris
    Chris avatar
    3 posts
    Member since:
    Feb 2015

    Posted 30 Sep Link to this post

    I'm having trouble getting the read using a POST in a kendo.data.DataSource working.  It works fine for me using jQuery's $.ajax function, but not in the transport.read of Kendo's DataSource.

    Here is the code running:

    http://jsfiddle.net/jmowox1k/1/

    It makes two Ajax calls, the first using jQuery way and the second using the Kendo way.  It sends the data as "application/x-www-form-urlencoded; charset=UTF-8".

    The submitted form data is:

    PropertyNumber=123&Address=1313+Mockingbird+Lane&AtRisk=Yes&FuelFacility=No&PropertyName=The+Munsters&City=Los+Angeles&Rec=Yes&DryCleaner=No&DCType=2&State=CA&OngoingEnv=1&ProjectType=2

    I've attached two screenshots of Chrome's Developer Tools.  Using jQuery, it looks perfect, but using the Kendo DataSource, it's all mangled.

    I guess I can just use the jQuery way and everything would fine, but I want to understand why recommended way doesn't work.

    What am I doing wrong?

     

  2. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 03 Oct Link to this post

    Hello Chris,

    I can assume that the different result is caused by the parameterMap property of the Grid. As the following code snippet is changing the result:

    var s = JSON.stringify(options);

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.parameterMap


    In order to achieve the desired result, I can suggest using the following approach to get the information from the form and send the parameters for paging, filtering, sorting etc. This will also be needed if the jQuery.Ajax approach is used as the Grid specific parameters need to be added to the response as well:
     
    dsPropReturn = new kendo.data.DataSource({
     serverPaging: true,
     transport: {
      read: {
       url: baseUrl + "/property/Search",
       type: 'POST',                           
       beforeSend: function(xhr) {         
        xhr.setRequestHeader('X-CSRF-Token', $("#csrfToken").val());
       }
      },
      parameterMap: function(options) {                    
       return $("form").serialize() + "&" + $.param(options)
      }
     },
     pageSize: 10
    });


    Additionally, I confirm with our developers that due to data manipulations of the dataSource, if the form is serialized the dataSource will then convert it to string.

    Let me know if you need additional information on this matter.

    Regards,
    Stefan
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top