Using $.ajax vs kendo.data.DataSource

[Chris]

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?

 

[Stefan]

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