Почему данные из наблюдаемого объекта Kendo DataSource не регистрируются в консоли?

Question

Я пытаюсь читать с удаленного сервиса. Когда я использую метод .read(), я вижу ответ AJAX на вкладке Network моего браузера, но я не понимаю, почему я не могу зарегистрировать ответ сервера на консоль моего браузера.

Вот мой код:

var accountsListDs = new kendo.data.DataSource({ 
    transport: { 
     read: function() { 
      $.ajax({ 
       url: "http://localhost:8085/cabinet/wicket/bookmarkable/com.office.web.services.AccountsService", 
       dataType: "json", 
       type: "POST", 
       cache: false, 
       data: { 
        op: "list" 
       }, 
       success: function(){ 
        console.log("DataSource Read Success"); 
       }, 
       error: function(){ 
        console.log("DataSource Read Failed"); 
       } 
      }); 
     }, 
     schema: { 
      data: function(response) { 
       return response; 
      } 
     } 
    }, 
    requestEnd: function(e) { 
     var response = e.response; 
     console.log(response);   
    } 
}); 

я вручную побежал accountsListDs.read() из консоли моего браузера. Я получаю идеальный ответ от сервера. Когда я попытался сделать accountsListDs.data(), он возвращает пустой массив. Я предполагаю, что он делает асинхронный вызов, поэтому .data() не сразу начнет работать, я даже попытался подключить его к событию requestEnd (как описано в слишком полезной документации Кендо, но все равно не повезло).

Даже если я скопирую код из документации Kendo, он не работает.

Что мне здесь не хватает?

(Спасибо заранее, CodingWithSpike)

Answer 1

Вы можете, но вы не распространяющиеся данные, полученные с помощью ajax запроса. Вы должны вызывать op.success с полученным данным:

var accountsListDs = new kendo.data.DataSource({ 
    transport: { 
     read: function(op) { 
      $.ajax({ 
       url: "http://localhost:8085/cabinet/wicket/bookmarkable/com.office.web.services.AccountsService", 
       dataType: "json", 
       type: "POST", 
       cache: false, 
       data: { 
        op: "list" 
       }, 
       success: function(data){ 
        console.log("DataSource Read Success"); 
        op.success(data); 
       }, 
       error: function(){ 
        console.log("DataSource Read Failed"); 
       } 
      }); 
     }, 
     schema: { 
      data: function(response) { 
       return response; 
      } 
     } 
    }, 
    requestEnd: function(e) { 
     var response = e.response; 
     console.log(response);   
    } 
}); 

Следующий фрагмент кода показывает бегущую версию этой идеи.

$(document).ready(function() { 
 
    var dataSource = new kendo.data.DataSource({ 
 
    transport: { 
 
     read: function (op) { 
 
     $.ajax({ 
 
      url: "http://demos.telerik.com/kendo-ui/service/Products", 
 
      dataType: "jsonp", 
 
      success: function(data){ 
 
      console.log("DataSource Read Success"); 
 
      op.success(data); 
 
      }, 
 
      error: function(){ 
 
      console.log("DataSource Read Failed"); 
 
      } 
 
     }); 
 
     } 
 
    }, 
 
    requestEnd: function(e) { 
 
     var response = e.response; 
 
     console.log(response); 
 
    }, 
 
    batch: true, 
 
    pageSize: 20, 
 
    schema: { 
 
     data: function(response) { 
 
     return response; 
 
     } 
 
    } 
 
    }); 
 

 
    $("#grid").kendoGrid({ 
 
    dataSource: dataSource, 
 
    pageable: true, 
 
    height: 550, 
 
    columns: [ 
 
     "ProductName", 
 
     { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 }, 
 
     { field: "UnitsInStock", title: "Units In Stock", width: 120 }, 
 
     { field: "Discontinued", width: 120 } 
 
    ], 
 
    }); 
 
});

<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" /> 
 
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" /> 
 
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script> 
 

 
<div id="grid"></div>