KendoUI Datasource when not bound to any controls

Question

I'm using a KendoUI Datasource in several places, some are bound to controls others are not. The call is to a remote web service and can be quite expensive some I'm trying to just execute it first.

The first time I need the data is for a situation where it is not bound to a control.

I call a function similar to this to create the datasouce:

function BuildDS() {
    var DS = new kendo.data.DataSource({
        transport: {
            read: {
                url: "../WS/GetData",
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                type: "POST"
            }
        }
    });

    return DS;
}

I then have another function which iterates through the DS.

function GetName(DSIn, fieldID) {

    DSIn.read();

    var visname = "";
    $.each(DSIn.data(), function (idx, vis) {
        if (vis.FIELD_ID == fieldID) {
            visname = vis.DISPLAY_LABEL;
            return false;
        }
    });
    return visname;
}

I can see that the remote web service is being invoked and returns the data as expected. However the data() property of the DS always returns no data.

When I bind the same datasource to a Kendo control then the data is populated on the DS.

Answer 1

Retrieving the data from the server is an async operation, so when you iterate, this call hasn't completed yet. You should use fetch instead:

dataSource.fetch(function(){
  var data = this.data();
  console.log(data.length); 

  // now you can iterate over data
});