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

Problem Binding to Remote Data

3 Answers 457 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John DeVight
Top achievements
Rank 1
John DeVight asked on 29 Nov 2011, 02:53 PM
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:
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

3 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 01 Dec 2011, 10:08 AM
Hi John Devight,

Although, I'm not familiar with Django, looking at the jQuery ajax setup, I suspect that you may need to set the same settings to the DataSoure transport:

dataSource: {
     transport: {
         read: {
             url: '/widgets/widgetsList/',
            contentType: 'application/json; charset=utf-8',
            type: 'GET',
            dataType: 'json',
         }
     },
     pageSize: 10
 },

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John DeVight
Top achievements
Rank 1
answered on 01 Dec 2011, 05:16 PM
Thanks Rosen.  That worked! =)

Regards,

John DeVight
0
Ben
Top achievements
Rank 1
answered on 15 Mar 2012, 07:25 AM
I've got the same problem in the new beta. I tried what was posted, but it doesn't load but also doesn't show an error in the console... Any ideas?

Works fine if I pass the JSON manually to it using an ajax call like the poster did.
Tags
Grid
Asked by
John DeVight
Top achievements
Rank 1
Answers by
Rosen
Telerik team
John DeVight
Top achievements
Rank 1
Ben
Top achievements
Rank 1
Share this question
or