Question

我有一个在document.ready（）上加载的kendo数据源，并使用JSON请求的结果填充一个组合框。然后，一旦用户选择了组合框中的项目，我就告诉我们有一个函数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());

        }
    });


});

此处的每个数据源都会返回我已使用rest客户端验证的正确JSON数据。问题只是customerSelected（）函数中的kendo.data.DataSource（）实际上没有做任何事情。我已经尝试了各种方法来获得这个功能，我习惯于在纯粹的Jquery世界中进行Ajax调用和追加/更新DOM。在加载DOM之后，我在这里想要允许另一个DataSource是什么？

Answer 1

你的问题是：

创建数据源后，您没有读取数据。
数据以异步方式加载，因此您无法立即使用它。

试试这个：

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））;

页面加载后的Kendo数据源

3 个答案: