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"
}
}
});
Related
Code:
var url = base_url + "/api/v1/users/getUsers";
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: 'GET',
url:url,
dataType: 'json',
data: { searchTerm: $("#searchTerm").val().trim() },
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
},
schema: {
data: function (result) {
return result.model;
},
total: function (result) {
return result.model.length;
},
},
pageSize: 5
});
$("#matches").kendoListView({
dataSource: dataSource,
autoBind: false, // if set to false the widget will not bind to the data source during initialization.
template: kendo.template($("#matchesListViewTemplate").html())
});
$("#pager").kendoPager({
dataSource: dataSource,
autoBind: false
});
$(document).keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
var searchTerm = $("#searchTerm").val().trim();
if (searchTerm.length < 1)
return;
dataSource.read();
dataSource.page(1); // makes another call to the remote service
}
});
Because data source is remote, when we call dataSource.page(1), kendo issues another call to the remote service. This behaviour is described in this so post:
If you are doing server side paging it should be enough doing grid.dataSource.page(1) since this will invoke the read exactly as you already realized.
What must I change so that after I search with new searchTerm, API call would be done only once and pager would go to page 1 without making another call?
I tried with dataSource.query() but still no luck? I hope I demonstrated enough.
Solution is to call dataSource.page(1) when dataSource.read() gets data / is done.
$(document).keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
var searchTerm = $("#searchTerm").val().trim();
if (searchTerm.length < 1)
return;
dataSource.read().done(function() {
// in case remote service returns empty result set (but still http 200 code)
// page() makes another request (if data() is empty it makes another request)
// therefore we must check data length/total
if( dataSource.total() > 0)
dataSource.page(1);
}
});
If the read request's response have not arrived yet or if an error occurs, another read request is allowed (in order to fetch data). DataSource.read() makes asynchronously request and then dataSource.page(1) starts to execute. DataSource.page(1) function checks if there is any data read, if it's not it executes again read method - therefore we got 2 calls as you mentioned it. Because of asynchronously call this scenario may happen.
I'm trying to read from a remote data source using Kendo DataSource. "Uncaught TypeError: undefined is not a function".
The browser successfully makes the AJAX call, and I'm unable to figure out what's wrong with Kendo internally. Their documentations are of no help.
Here's my code:
var accountsListDs = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost:8085/cabinet/wicket/bookmarkable/com.finovera.web.services.AccountsService",
dataType: "json",
type: "GET",
data: {
op: "list"
}
}
}
});
Here's the stack trace: http://pastebin.com/GtaHifJM
Turns out the problem was not with Kendo. Wicket doing some bizarre redirects to another URL, and the POST requests were getting converted to GET requests on the server side.
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/
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
I'm new in kendo UI and I don't fully understand what is the primary goal and advantage of using kendo.data.Model within dataSource.
Not really sure if I understand your question. But the datasource is a good way to abstract your interaction with for example twitter:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
// the remote service url
url: "http://search.twitter.com/search.json",
// JSONP is required for cross-domain AJAX
dataType: "jsonp",
// additional parameters sent to the remote service
data: {
q: "html5"
}
}
},
// describe the result format
schema: {
// the data which the data source will be bound to is in the "results" field
data: "results"
}
});