Источник данных Kendo после загрузки страницы

Question

У меня есть источник данных кендо, который загружается на document.ready() и заполняет выпадающий список с результатами запроса JSON. Затем, как только пользователь выбирает элемент в combobox, я скажу, что функция customerSelected() выполняется для загрузки значений для этого клиента. У меня проблема: я не могу установить другой источник данных Kendo для заполнения данных после загрузки страницы. Если я использую обычный JQuery ajax-вызов, данные, как представляется, загружаются после того, как шаблоны Kendo выполняются и не заполняют мои данные.

function customerSelected(customerid) { 
    var customer = customerid; 

    var commTemplate = kendo.template(' # for (var i=0; i < data.length; i++) { # <div class="communication" contentEditable>#= data[i].fname # - #= data[i].lname # #= data[i].details #</div> # } # '); 
    var commData = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "index.php?mode=showCustomerData", 
       dataType: "json" 
      } 
     } 
    }); 

    $("#communications").html(commTemplate(commData)); 
} 

$('document').ready(function() { 

    var customers = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "index.php?mode=showCustomers", 
       dataType: "json" 
      } 
     } 
    }); 
    $("#customerBox").kendoComboBox({ 
     dataSource: customers, 
     dataTextField: "name", 
     dataValueField: "customer_id", 
     filter: "contains", 
     change: function(e) { 
      console.log(this.value()); 
      customerSelected(this.value()); 
      $("#customerSelected").val(this.value()); 

     } 
    }); 


}); 

Каждый источник данных здесь возвращает правильные данные JSON, которые я проверил с клиентом покоя. Проблема в том, что kendo.data.DataSource() в функции customerSelected() фактически ничего не делает. Я попробовал различные способы получить эту функциональность, к которой я привык, в чисто JQuery-мире, который делает Ajax-вызовы и добавляет/обновляет DOM. Что мне здесь не хватает, чтобы позволить другому источнику данных после загрузки DOM?

Answer 1

Ваши проблемы таковы:

1. Вы не читаете данные после создания источника данных.

2. Данные загружаются асинхронно, поэтому вы не можете использовать их сразу.

Попробуйте это:

function customerSelected(customerid) { 
    var customer = customerid; 

    var commTemplate = kendo.template(' # for (var i=0; i < data.length; i++) { # <div class="communication" contentEditable>#= data[i].fname # - #= data[i].lname # #= data[i].details #</div> # } # '); 
    var commData = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "index.php?mode=showCustomerData", 
       dataType: "json" 
      } 
     } 
    }); 

    // run this callback the next time data changes 
    // which will be when the data is done being read from the server 
    commData.one("change", function() { 
     $("#communications").html(commTemplate(commData.data())); 
    }); 

    // read the data from the server 
    commData.fetch(); 
} 

Answer 2

попробовать:

var commTemplate = kendo.template(' # for (var i=0; i < data.length; i++) { # <div class="communication" contentEditable>#= data[i].fname # - #= data[i].lname # #= data[i].details #</div> # } # '); 
var commData = new kendo.data.DataSource({ 
transport: { 
    read: { 
     url: "index.php?mode=showCustomerData", 
     dataType: "json" 
    } 
}, 
change: function() { 
    $("#communications").html(kendo.render(commTemplate, this.view()); 
} 
}); 

commData.read(); 

Взято из:. http://demos.kendoui.com/web/datasource/remote-data.html

Answer 3

$ ("# связи") HTML (commTemplate (this._pristine));