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 Answers, 1 is accepted
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
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
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.
Rosen
the Telerik team
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
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
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
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
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);
}
}
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()
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
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();
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.
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);
}
});
}
},
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
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
});