Kendo - Change DataSource onclick

Question

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

В настоящее время мой DataSource и Кендо 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. Это только изменит его в одну сторону, но вы должны быть в состоянии экстраполировать здесь, если это необходимо.

В действии в этом 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') 
});