dxDataGrid - ウィジェットをリフレッシュする方法

Question

ボタンをクリックすると、更新されません。データベースに追加する場合はボタンを押して画面に移動します。しかし更新していません。私はajaxでデータグリッドを作成しました。 ViewModelで更新機能を書きました。更新しない理由は何でしょうか。私のデータはjsonです。

$.ajax({ 
 
     type: "GET", 
 
     url: "https://js.devexpress.com/Demos/WidgetsGallery/data/orderItems" 
 
     success: function (msg, result, status, xhr) { 
 
     var obj = jQuery.parseJSON(msg); 
 
     $("#gridContainer").dxDataGrid({ 
 
     dataSource: obj, 
 
     filterRow: { 
 
     visible: true}});}}); 
 
     var viewModel = { 
 
     refresh: function() {   
 
     var dataGrid = $('#gridContainer').dxDataGrid('instance'); 
 
     dataGrid.refresh();}}; 
 
return viewModel;

<div data-options="dxView : { name: 'dd',disableCache: true } " > 
 
    <div data-bind="dxCommand: { icon: 'refresh', id: 'save', onExecute: refresh }"></div> 
 
    <div data-options="dxContent : { targetPlaceholder: 'content' } " > 
 
     
 
     <div id="gridContainer"></div> 
 
     
 
      </div> 
 
</div>

Answer 1

アレックスが述べたように、あなたのAJAXは一つだけに起こります。だから、それはデータをロードするためにDataSource configuration objectを使用することをお勧めします：

var dataSource = { 
    load: function() { 
     var items = $.Deferred(); 
     $.ajax({ 
      type: "GET", 
      url: "https://js.devexpress.com/Demos/WidgetsGallery/data/orderItems", 
      success: function(result) { 
       items.resolve(result.items); 
      } 
     }); 

     return items.promise(); 
    } 
}; 

$("#gridContainer").dxDataGrid({ 
    dataSource: dataSource, 
    //... 
}); 

を次に、あなたがdxDataGridのrefresh()メソッドを呼び出した場合、データソースが再ロードされます。

Demo

ご注意データソースを動的に変化されている場合、refresh方法が便利です。