CODEWITHSUNDEEP
javascriptjquerykendo-uijquery-eventskendo-mobile
TruMan1
TruMan1

Reputation: 36158

Change template for Kendo Mobile ListView on setDataSource?

I am changing the datasource using the setDataSource method, but need to change the template too. Changing the template dynamically doesn't seems to work though.

Below is what I have and the jsFiddle is here: http://jsfiddle.net/MfSup. Notice it doesn't change to "Template 2" in the onFilter event when clicking on the button group. Is this a bug or am I doing this wrong?

new kendo.mobile.Application();

var ds1 = new kendo.data.DataSource({
    data: [{
        stagename: "ds1 A",
        b: "1b"
    }, {
        stagename: "ds1 B",
        b: "2b"
    }]
});

var ds2 = new kendo.data.DataSource({
    data: [{
        stagename: "ds2 A",
        b: "1b"
    }, {
        stagename: "ds2 B",
        b: "2b"
    }]
});

var onFilter = function (e) {
    var lv = $("#stages_listview")
        .data('kendoMobileListView');
    
    //CHANGE TEMPLATE DOESN'T WORK
    lv.options.template = this.selectedIndex == 0
        ? $("#stages_listview_template1").html()
    : $("#stages_listview_template2").html();
    
    lv.setDataSource(this.selectedIndex == 0 ? ds1 : ds2);
};

$("#stages_listview").kendoMobileListView({
    dataSource: ds1,
    template: $("#stages_listview_template1").html()
});

Upvotes: 0

Views: 1638

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30671

The following should work:

lv.template = kendo.template("<li data-uid='#=uid#'>" + 
              (this.selectedIndex == 0  ? 
               $("#stages_listview_template1").html() :
               $("#stages_listview_template2").html()
              ) + 
             "</li>");

Upvotes: 1

Related Questions