CODEWITHSUNDEEP
jsonhtmlkendo-ui
jinx
jinx

Reputation: 87

KendoUI and json

I'm quite new to kendoUI and json, my problem is that It's seems the data does not load, maybe incorrect schema or something, get no errors, just the combobox loading the whole time. Here's my sample code:

$(document).ready(function () {
    clientDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://localhost/JSON_MP.asmx/GetListCountries?developerId=101&developerHash=9df7273b410761f74331bde746e5c2354b73b487&timestamp=1242207092430",  //Note the URL path!
                dataType: "json",
                contentType: "application/json; charset=utf-8"

            }
        },
        schema: {
            data: "listValues"               
        }
    });

    $("#kendoCboClient").kendoComboBox({
        placeholder: "Select a Country...",
        dataTextField: "name",
        dataValueField: "id",
        dataSource: clientDS
    });
});

and my data-stack:

{"errorString":"ok","errorCode":0,"listValues":[{"name":"UNKNOWN","id":1},{"name":"South Africa","id":2},{"name":"Mozambique","id":3},{"name":"Philippines","id":4},{"name":"Namibia","id":5},{"name":"United Arab Emirates","id":6},{"name":"England","id":7},{"name":"Swaziland","id":8},{"name":"Portugal","id":9},{"name":"Greece","id":10},{"name":"Mauritius","id":11},{"name":"TANZANIA","id":12},{"name":"Botswana","id":13},{"name":"Spain","id":15},{"name":"Scottland","id":16},{"name":"Australia","id":17},{"name":"New Zealand","id":18},{"name":"Cyprus","id":19},{"name":"United States","id":20},{"name":"Germany","id":21},{"name":"","id":22},{"name":"Madagascar","id":23},{"name":"Malaysia","id":24},{"name":"Seychelles","id":25}],"listType":"Country"}

If someone can just point me into the right direction or something, note that in the data-stack I'm using "listValues" objects, can be maybe because the ""errorString":"ok","errorCode":0," part that is the issue?

Upvotes: 0

Views: 1793

Answers (3)

Dima R.
Dima R.

Reputation: 997

In my case, I had this: My test html file was from the local file system, and the json object I was loading from the server url. Once, I changed the url to read from local file-system, it solved the problem

Upvotes: 0

Katya S
Katya S

Reputation: 1353

I had a similar issue - no data and no error. The actual problem was that the page returning the json data was sending "html" content type header instead of the "application/json". This issue is actually addressed here: http://docs.kendoui.com/tutorials/PHP/build-apps-with-kendo-ui-and-php (scroll half-way down to the section "There’s No Data…") and is fixed by making sure that you are sending the correct content type header.

Upvotes: 0

OnaBai
OnaBai

Reputation: 40887

I've just tried your code and worked perfectly well! I only have had to change a line of code: the url since, of course, I did not deploy the file in the same path than you.

Said so...:

  1. Try opening in your browser the url as you typed it in your code and check that it actually returns the JSON that you included in your question.
  2. If previous point works fine then if your browser has developer tools, check that there is no error in browser console.
  3. If you don't have developer tools or don't know how to use them, try:

.

var clientDS = new kendo.data.DataSource({
    transport: {
        read: function (options) {
            $.ajax({
                url    : "http://localhost/JSON_MP.asmx/GetListCountries?developerId=101&developerHash=9df7273b410761f74331bde746e5c2354b73b487&timestamp=1242207092430",
                data   : options.data,
                success: function (result) {
                    alert("Good!");
                    options.success(result);
                },
                error  : function (xhr, textStatus, errorThrown) {
                    alert("bad!: " + xhr.status + " - " + textStatus + " - " + errorThrown);
                }
            });
        }
    },
    schema   : {
        data  : "listValues"
    }
});
$("#kendoCboClient").kendoComboBox({
    placeholder   : "Select a Country...",
    dataTextField : "name",
    dataValueField: "id",
    dataSource    : clientDS
});

And see if error alert is displayed and gives you some information.

Upvotes: 2

Related Questions