CODEWITHSUNDEEP
javascriptjquerykendo-ui
Keizer
Keizer

Reputation: 53

Kendo data source after page load

I have a kendo data source that loads on document.ready() and populates a combobox with results from JSON request. Then once the user selects an item in the combobox I tell have a function customerSelected() execute to load the values for that customer. Problem I am having is I can't set another Kendo data source to populate with data after the page has loaded. If I use a regular Jquery ajax call the data seems to load in after Kendo templating executes and doesn't populate my data.

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());

        }
    });


});

Every data source here returns correct JSON data that I have verified with a rest client. The problem is just that the kendo.data.DataSource() in the customerSelected() function doesn't actually do anything. I have tried a variety of ways to get this functionality that I am used to in the purely Jquery world of doing Ajax calls and appending/updating the DOM. What am I missing here to allow for another DataSource after the DOM has been loaded?

Upvotes: 2

Views: 8942

Answers (3)

CodingWithSpike
CodingWithSpike

Reputation: 43698

Your problems are that:

  1. You are not reading the data after creating the data source.

  2. Data is loaded asynchronously, so you can't use it right away.

Try this:

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();
}

Upvotes: 2

Keizer
Keizer

Reputation: 53

$("#communications").html(commTemplate(this._pristine));

Upvotes: 0

Chris Dixon
Chris Dixon

Reputation: 9167

try:

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();

Taken from: http://demos.kendoui.com/web/datasource/remote-data.html

Upvotes: 1

Related Questions