Kendo - Change DataSource onclick

Question

I have a question about changing the datasource in Kendo.

Currently my dataSource and Kendo List View looks something like below:

var DSOne = new kendo.data.DataSource({
        dataType: 'json',
        transport: {
            read:
            {
                url: DS_URL_1,
                type: "GET",
                xhrFields: { withCredentials: true },
                crossDomain: true
            }
        },
        pageSize: 9,
        serverPaging: false
    });

    var DSTwo = new kendo.data.DataSource({
        dataType: 'json',
        transport: {
            read:
            {
                url: DS_URL_2,
                type: "GET",
                xhrFields: { withCredentials: true },
                crossDomain: true
            }
        },
        pageSize: 9,
        serverPaging: false
    });

    var viewModel = kendo.observable({
        apps: DSOne
    });

    kendo.bind(jQuery('#listViewID'), viewModel);

    $("#pager").kendoPager({
        dataSource: DSOne
    });

And what I want to be able to is when I click on a button to change the dataSource for the viewModel and the pager so that new data loads into #listViewID

JFlox JFlox · Accepted Answer · 2015-02-03T03:27:28

Here is the viewmodel and js. This will only change it one way, but you should be able to extrapolate from here if need be.

In action in this fiddle

var viewModel = kendo.observable({
    DSOne: new kendo.data.DataSource({
        data:[
            {id:1, name:'Bob'},
            {id:2, name:'Tom'},
            {id:3, name:'Carol'},
            {id:4, name:'Ann'}
        ],
        pageSize: 2,
        serverPaging: false
    }),
    DSTwo: new kendo.data.DataSource({
        data:[
            {id:5, name:'Dan'},
            {id:6, name:'Mark'},
            {id:7, name:'Al'},
            {id:8, name:'Lisa'},
            {id:9, name:'Eric'},
        ],
        pageSize: 2,
        serverPaging: false
    }),
    changeDataSource: function(e) {
        e.preventDefault();
        var listView = $("#listview").data('kendoListView')
            listView.setDataSource(viewModel.get('DSTwo'));
        var pager =$("#pager").kendoPager({dataSource: viewModel.get('DSTwo')}).data('kendoPager')

    }
});

kendo.bind(jQuery('#container'), viewModel);

$("#listview").kendoListView({
    dataSource: viewModel.get('DSOne'),
    template:" #=name#"
});

$("#pager").kendoPager({
    dataSource: viewModel.get('DSOne')
});

Kendo - Change DataSource onclick

1 Answers