Proper Binding Of Json To Kendo DropDownList

I have the following json data (see below) from a webservice query (_urlTowns). I want to bind a Kendo UI dropdownlist control to this datasourceTowns. { 'displayFieldName': 'TNONA

Solution 1:

Maybe your JSON is not the most convenient for a DropDownList but you can bind it to a KendoDropDownList with no change.

Define the DropDownList as:

$("#dropdown").kendoDropDownList({
    dataSource    : dataSourceTowns,
    dataTextField : "attributes.TNONAM"
});

Remember that dataTextField doesn't strictly have to be a field, might be path to the field.

Where your HTML is:

<select id="dropdown"></select>

Solution 2:

For your dropdown configuration, part of your json need to be:

"features": [{"TNONAM": "ANSONIA"}, 
             {"TNONAM": "BETHANY"},
             {"TNONAM": "BRANFORD"},
             {"TNONAM": "WOODBRIDGE"}]

If json response strictly need to be that, then you may have to parse response data like:

schema: {
        data: function(response) {
            var responsedata = response.features;
            var parsedjson =  []; //use responsedata to make json structure like above
            return parsedjson; 
        }
    }