This is a migrated thread and some comments may be shown as answers.

Using $.ajax vs kendo.data.DataSource

1 Answer 567 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 30 Sep 2016, 03:12 PM

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?

 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 03 Oct 2016, 02:28 PM
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.
 
Tags
Data Source
Asked by
Chris
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or