Kendo - Изменить источник данных по клику

Question

У меня есть вопрос об изменении источника данных в кендо.

В настоящее время мой DataSource и Kendo List View выглядят примерно так:

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

И я хочу иметь возможность, когда я нажимаю на кнопку, чтобы изменить источник данных для viewModel и пейджера, чтобы новые данные загружались в #listViewID

Answer 1

Вот модель и JS. Это изменит только один путь, но вы сможете экстраполировать отсюда, если это будет необходимо.

В действии в этой скрипке

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