ajax with kendo datasource in jsfiddle using echo api - ajax

I'm trying to implement an ajax based kendo datasource.
Getting errors like:
TypeError: e.schema is undefined
..when you exclude the schema property declaration...
OR
TypeError: r._observable is not a function
Above error happens when I try to write schema definition as follows:
schema:{
data:function(response){
return response;
}
The code I've used is as follows:
$(document).ready(function () {
var ds = kendo.data.DataSource({
schema: {
type:'json'
},
transport: {
type: 'json',
read: {
url:'/echo/json/',
type:'POST',
data:{
json: JSON.stringify(students),
delay:1000
},
contentType:'application/json',
processData:false
}
}
});
//stripped for sake of brevity
});
You can use the following fiddle for starts: http://jsfiddle.net/deostroll/3GqVR/4/
Positive I am missing something on the kendo configuration front...

A couple of issues:
You should use the new operator to instantiate a data source:
var ds = new kendo.data.DataSource({ /* options */ });
For some reason /echo/json/ didn't like the delay option. Removing it fixes it.
The dataSource option of the grid is never set.
Here is the updated fiddle: http://jsfiddle.net/3GqVR/9/

Related

kendo angular k-ng-delay with ajax data-fetch as the source of data for dataSource

I am trying to understand what is meant here by the phrase "when the gridOptions variable becomes available". By "becomes available" is it meant that the kendo UI control is watching or observing the gridOptions variable to detect a change?
Also, I don't understand why the $http success-handler creates a new dataSource object based on result.data, and then in the gridOptions object we have dataSource: data. I would expect to see there dataSource: dataSource.
Does the dataSource property for the UI widget's ng-delay-configuration object expect to be assigned raw data or a kendo dataSource object?
// in controller
$http({ method: "GET", url: "customers.json" })
.success(function(result){
var dataSource = new kendo.data.DataSource({
data: result.data
});
$scope.gridOptions = {
dataSource: data,
columns: result.columns,
...
};
});
<!-- in HTML: -->
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions"></div>
In this context "becomes available" means when it is defined in the angular scope the widget will then be created. To rebind the widget when a property changes the k-rebind attribute should be used on the widget that you wish to update.
The $http success handler is correct in creating a new kendo.data.DataSource, but it should have following code (as you suggested):
$http({ method: "GET", url: "customers.json" })
.success(function(result){
var dataSource = new kendo.data.DataSource({
data: result.data
});
$scope.gridOptions = {
dataSource: dataSource,
columns: result.columns,
...
};
});
Also here the kendo-grid has a k-rebind attribute applied, which will refresh the grid when the gridOptions item is changed.
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions" k-rebind="gridOptions"></div>

DataSource callback undefined when using JSONP

Using KendoUI for the first time, playing with DataSource. Keep getting Uncaught TypeError: undefined is not a function. The service response comes back as expected, with the callback in there. Tried with and without specifying the callback function name, same problem. The "change" function is never, triggered, obviously.
The code couldn't be simpler:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://my-service-domain/hotels.jsonp?city=Denver",
dataType: "jsonp"
jsonpCallback: "myCallBack",
}
},
change: function(e){
console.log(e);
}
});
// read data from the remote service
dataSource.read();
What am I doing wrong?
Thanks.
Is it jsonpCallback or jsonpCallbackString? Check: http://www.telerik.com/forums/datasource-jsonp-random-callback-function-name
The Kendo UI DataSource relies entirely on $.ajax for making remote
service requests. The jsonpCallbackString setting can be used to set
your own callback name. Here is how to do this via the transport:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "....",
jsonpCallbackString: "mycallback"
}
}
});

How to get Single result on kendo.data.Datasource

I have an Odata result like this
{"odata.metadata":"https://localhost/DocTalkMobileWebApiOData/odata/$metadata#MasterPatient/#Element","PatUniqueId":"39e713db-6a0e-4e59-bf7b-033f4fc47ad5", "PatID":null,
"pat_lname":"White","pat_fname":"Peter","pat_mi":" ","pat_ssn":"270787655","pat_dob":"08/07/1973","pat_sex":"M","pat_status":null,"priInsID":2,"secInsID":1,"PCPID":1,"InternalDrID":1,"EXPID":1,"EXPDate":"","pat_phone":null,"isNew":true,"imported":true,"byWhom":"dt","lastUpdate":"2011-03-30T09:41:57.36","changeStamp":"AAAAAAAAIUE=","address":"","city":"","state":"","zip":"","currentMcp":"","currentVisitCount":-2,"otherId":"543674","pcpName":null,"hasChanges":true,"ProgramSource":null,"mrnID":"","createdBy":null,"createdDate":"2007-10-26T10:16:15","expLocation":null,"ethnicId":1,"prefLanguageId":1,"raceId":1
}
and i tried to get this result via kendo.ui.datasource:
newPatient = new kendo.data.DataSource({
type: 'odata', // <-- Include OData style params on query string.
transport: {
read: {
url: url + '/MasterPatient(guid\'00000000-0000-0000-0000-000000000000\')', // <-- Get data from here
dataType: "json" // <-- The default was "jsonp"
},
parameterMap: function (options, type) {
var paramMap = kendo.data.transports.odata.parameterMap(options);
delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
delete paramMap.$format; // <-- remove format parameter.
return paramMap;
}
},
schema: {
data: function (data) {
return data;
},
total: function (data) {
return data['odata.count']
},
}
});
newPatient.fetch(function () {
kendo.bind($('#newPatientTab'), newPatient);
});
But not sure why it always throw error :
Uncaught TypeError: Object [object global] has no method 'slice'
Please help me. Thanks
In Kendo UI, DataSource works only with arrays. If you can change the server response to send something like this
[{"odata.metadata":"https://localhost/DocTalkMobileWebApiOData/odata/$metadata#MasterPatient/#Element","PatUniqueId":"39e713db-6a0e-4e59-bf7b-033f4fc47ad5","PatID":null,"pat_lname":"White","pat_fname":"Peter","pat_mi":" ","pat_ssn":"270787655","pat_dob":"08/07/1973","pat_sex":"M","pat_status":null,"priInsID":2,"secInsID":1,"PCPID":1,"InternalDrID":1,"EXPID":1,"EXPDate":"","pat_phone":null,"isNew":true,"imported":true,"byWhom":"dt","lastUpdate":"2011-03-30T09:41:57.36","changeStamp":"AAAAAAAAIUE=","address":"","city":"","state":"","zip":"","currentMcp":"","currentVisitCount":-2,"otherId":"543674","pcpName":null,"hasChanges":true,"ProgramSource":null,"mrnID":"","createdBy":null,"createdDate":"2007-10-26T10:16:15","expLocation":null,"ethnicId":1,"prefLanguageId":1,"raceId":1}]
then it will work fine.
N.B. It's in array format.
OR
You can wrap the single object into array on the client side, inside data function of the schema.
schema: {
data: function(server-response) {
return [server-response];
}
}
The Kendo team should put more time on good Documentation.
That means you are not using an odata source from the backed. You need to think about here do you really need a kendo odata source from the client in this case if your back-end not supported odata correcly.
See this response from odata url, http://services.odata.org/Northwind/Northwind.svc/?$format=json
It should return an array of object in the value field.
If you can't change the backed what you can do is to format the data in the Schema.data function
schema: {
data: function (data) {
return [data];
},

Kendoui DataSource odata $expand not working

I have a mobile listview bound to kendoui datasource pointing to an odata service. I have a $expand hint in the datasource config to expand "Patient" property of "Claim" object, but looking the url of the odata query, the kendoui datasource is not generating the $expand code in the querystring. How can I get the kendoui datasource to generate correct $expand instruction on the querystring?
OData query string genereated: http://localhost:1839/OData.svc/Claim?$callback=jQuery20207924230222124606_1374374358450&%24inlinecount=allpages&%24format=json&%24top=10
<script>
$(function () {
var app = new kendo.mobile.Application(document.body, {
transition: 'slide'
});
OData.defaultHttpClient.enableJsonpCallback = true;
var data = new kendo.data.DataSource({
type: "odata", // specifies data protocol
pageSize: 10, // limits result set
transport: {
read: "http://localhost:1839/OData.svc/Claim",
dataType: "json",
data: {
$expand: "Patient"
}
},
schema: {
model: {id: "Id"},
data: function (data) {
return data.d.results;
},
total: function (data) {
return data.d.__count;
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
$("#lst").kendoMobileListView(
{
template: "<strong>${data.ClaimNumber}</strong><br/>",
filterable: {
field: "ClaimNumber",
operator: "contains"
},
dataSource: data
});
});
</script>
The data and $expand belong inside the read object. You were getting close in your answer.
var dataSource = new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
// See http://www.odata.org/documentation/odata-v2-documentation/uri-conventions/ for OData URI conventions
// OData: ~/api/Users?$inlinecount=allpages&top=2
// OData: ~/api/Users?$inlinecount=allpages - includes odata.count
// OData: inline filtering: ~/api/Users?$filter=USERNAME eq 'asgro'
// to include hierarchical data, use the OData /api/UserGroups?$expand=USER
// To reduce the payload sice, the query ~/api/UserGroups will only include the USERGROUP entities, and not any navigation property content
url: "/api/UserGroups",
data: {
$expand: "USERS"
},
dataType: "json" // the default result type is JSONP, but WebAPI does not support JSONP
},
I added this right in the transport/read/url, rather than a separate data:
var dataSource = new kendo.data.HierarchicalDataSource({
type: "odata",
transport: {
read: {
// See http://www.odata.org/documentation/odata-v2-documentation/uri-conventions/ for OData URI conventions
// OData: ~/api/Users?$inlinecount=allpages&top=2
// OData: ~/api/Users?$inlinecount=allpages - includes odata.count
// OData: inline filtering: ~/api/Users?$filter=USERNAME eq 'asgro'
// to include hierarchical data, use the OData /api/UserGroups?$expand=USER
// To reduce the payload sice, the query ~/api/UserGroups will only include the USERGROUP entities, and not any navigation property content
url: "/api/UserGroups?$expand=USERS",
dataType: "json" // the default result type is JSONP, but WebAPI does not support JSONP
},
.
.
.
read: {
url: "http://localhost:1839/OData.svc/Claim",
dataType: "json",
data: {
$expand: "Patient"
}
}
The data only read options.

Kendo Datasource Transport custom function not getting called

Im experiencing a rather annoying bug (?) in Kendo UI Datasource.
My Update method on my transport is not getting called when I pass a custom function, but it does work if I just give it the URL.
This works:
...
transport: {
update: { url: "/My/Action" }
}
...
This does not
...
transport: {
update: function(options) {
var params = JSON.stringify({
pageId: pageId,
pageItem: options.data
});
alert("Update");
$.ajax({
url: "/My/Action",
data:params,
success:function(result) {
options.success($.isArray(result) ? result : [result]);
}
});
}
}
...
The function is not getting invoked, but an ajax request is made to the current page URL, and the model data is being posted, which is rather odd. Sounds like a bug to me.
The only reason I have a need for this, is because Kendo can't figure out that my update action returns only a single element, and not an array - so, since I dont want to bend my API just to satisfy Kendo, I though I'd do it the other way around.
Have anyone experienced this, and can point me in the right direction?
I also tried using the schema.parse, but that didn't get invoked when the Update method was being called.
I use myDs.sync() to sync my datasource.
Works as expected with the demo from the documentation:
var dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax( {
url: "http://demos.kendoui.com/service/products",
dataType: "jsonp",
success: function(result) {
options.success(result);
}
});
},
update: function(options) {
alert(1);
// make JSONP request to http://demos.kendoui.com/service/products/update
$.ajax( {
url: "http://demos.kendoui.com/service/products/update",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
// send the updated data items as the "models" service parameter encoded in JSON
data: {
models: kendo.stringify(options.data.models)
},
success: function(result) {
// notify the data source that the request succeeded
options.success(result);
},
error: function(result) {
// notify the data source that the request failed
options.error(result);
}
});
}
},
batch: true,
schema: {
model: { id: "ProductID" }
}
});
dataSource.fetch(function() {
var product = dataSource.at(0);
product.set("UnitPrice", product.UnitPrice + 1);
dataSource.sync();
});
Here is a live demo: http://jsbin.com/omomes/1/edit

Resources