I'm implementing a sample app using Kendo UI with Django (Python) and am getting the following error in Firebug when I attempt to bind to remote data:
url is not defined
return new Function(paramName, functionBody); kendo.core.js (line 246)
However, when I use jQuery.ajax to get the data and then bind to the response from the jQuery.ajax call as local data, everything works fine.
Here are the Request Headers:
Here are the Response Headers:
Here is the Response:
And finally, here is the grid definition:
This is what I needed to do to get it to work:
I would prefer to bind to the data remotely by setting the dataSource.transport configuration setting. Any ideas?
Regards,
John DeVight
Complete source code and explanation of this sample project can be found here
url is not defined
return new Function(paramName, functionBody); kendo.core.js (line 246)
However, when I use jQuery.ajax to get the data and then bind to the response from the jQuery.ajax call as local data, everything works fine.
Here are the Request Headers:
Host 127.0.0.1:8000
User-Agent Mozilla/5.0 (X11; Linux i686; rv:8.0.1) Gecko/20100101 Firefox/8.0.1
Accept */*
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip, deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection keep-alive
X-Requested-With XMLHttpRequest
Referer http://127.0.0.1:8000/widgets/
Cookie csrftoken=c5bf8586527ebfb8802391168634cfdf; sessionid=aafd686e68f8e4069c84e8412ee98e65
Here are the Response Headers:
Date Tue, 29 Nov 2011 13:35:58 GMT
Server WSGIServer/0.1 Python/2.7.2
Content-Type application/javascript
Here is the Response:
[{
"url"
:
"http://demos.kendoui.com/autocomplete/index.html"
,
"id"
: 1,
"name"
:
"AutoComplete"
}, {
"url"
:
"http://demos.kendoui.com/calendar/index.html"
,
"id"
: 2,
"name"
:
"Calendar"
}, {
"url"
:
"http://demos.kendoui.com/chart/index.html"
,
"id"
: 3,
"name"
:
"Chart"
}, {
"url"
:
"http://demos.kendoui.com/combobox/index.html"
,
"id"
: 4,
"name"
:
"ComboBox"
}, {
"url"
:
"http://demos.kendoui.com/datepicker/index.html"
,
"id"
: 5,
"name"
:
"DatePicker"
}, {
"url"
:
"http://demos.kendoui.com/dropdownlist/index.html"
,
"id"
: 6,
"name"
:
"DropDownList"
}, {
"url"
:
"http://demos.kendoui.com/grid/index.html"
,
"id"
: 7,
"name"
:
"Grid"
}, {
"url"
:
"http://demos.kendoui.com/menu/index.html"
,
"id"
: 8,
"name"
:
"Menu"
}, {
"url"
:
"http://demos.kendoui.com/panelbar/index.html"
,
"id"
: 9,
"name"
:
"PanelBar"
}, {
"url"
:
"http://demos.kendoui.com/splitter/index.html"
,
"id"
: 10,
"name"
:
"Splitter"
}, {
"url"
:
"http://demos.kendoui.com/tabstrip/index.html"
,
"id"
: 11,
"name"
:
"TabStrip"
}, {
"url"
:
"http://demos.kendoui.com/treeview/index.html"
,
"id"
: 12,
"name"
:
"TreeView"
}, {
"url"
:
"http://demos.kendoui.com/upload/index.html"
,
"id"
: 13,
"name"
:
"Upload"
}, {
"url"
:
"http://demos.kendoui.com/window/index.html"
,
"id"
: 14,
"name"
:
"Window"
}]
And finally, here is the grid definition:
$(
'#widgetsGrid'
).kendoGrid({
dataSource: {
type:
'json'
,
transport: {
read:
'/widgets/widgetsList/'
},
pageSize: 10
},
columns: [
{
field:
'name'
,
title:
'Name'
},
{
field:
'url'
,
title:
'Url'
}
]
});
This is what I needed to do to get it to work:
$(document).ready(
function
() {
$.ajax({
url:
'/widgets/widgetsList/'
,
contentType:
'application/json; charset=utf-8'
,
type:
'GET'
,
dataType:
'json'
,
success:
function
(response) {
// console.log(response);
$(
'#widgetsGrid'
).kendoGrid({
dataSource: {
data: response,
pageSize: 10
},
columns: [
{
field:
'name'
,
title:
'Name'
},
{
field:
'url'
,
title:
'Url'
}
]
});
},
error:
function
(xhr, status) {
console.log(status);
}
})
});
I would prefer to bind to the data remotely by setting the dataSource.transport configuration setting. Any ideas?
Regards,
John DeVight
Complete source code and explanation of this sample project can be found here