Problem Binding to Remote Data

4 posts, 0 answers
  1. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 29 Nov 2011 Link to this post

    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
  2. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 01 Dec 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 01 Dec 2011 Link to this post

    Thanks Rosen.  That worked! =)

    Regards,

    John DeVight
  5. Ben
    Ben avatar
    12 posts
    Member since:
    Mar 2012

    Posted 15 Mar 2012 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready