剣道グリッドの再読み込み/更新

JavaScriptを使用して剣道グリッドをリロードまたはリフレッシュする方法は？

多くの場合、しばらくしてから、またはユーザーの操作の後に、グリッドを再ロードまたは更新する必要があります。

使用できます

$('#GridName').data('kendoGrid').dataSource.read(); <!--  first reload data source -->

$('#GridName').data('kendoGrid').refresh(); <!--  refresh current UI -->

私はリフレッシュすることはありません。

$('#GridName').data('kendoGrid').dataSource.read();

一人でいつもうまくいきます。

$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

最近のプロジェクトでは、いくつかのドロップダウン選択で発生していたいくつかの呼び出しに基づいて、Kendo UIグリッドを更新する必要がありました。これが私が最終的に使用したものです：

$.ajax({
        url: '/api/....',
        data: { myIDSArray: javascriptArrayOfIDs },
        traditional: true,
        success: function(result) {
            searchResults = result;
        }
    }).done(function() {
        var dataSource = new kendo.data.DataSource({ data: searchResults });
        var grid = $('#myKendoGrid').data("kendoGrid");
        dataSource.read();
        grid.setDataSource(dataSource);
    });

うまくいけば、これにより時間を節約できます。

これらの答えのどれもreadが、promise を返すという事実を得ません。つまり、データがロードされるのを待ってから、refreshを呼び出すことができます。

$('#GridId').data('kendoGrid').dataSource.read().then(function() {
    $('#GridId').data('kendoGrid').refresh();
});

データグラブがインスタント/同期の場合、これは不要ですが、すぐに返されないエンドポイントからのものである可能性が高いです。

ハンドラーのグリッドへの参照が必要ない場合は、次のコードを使用できます。

 $(".k-pager-refresh").trigger('click');

更新ボタンがある場合、これはグリッドを更新します。ボタンは次のように有効にすることができます：

[MVC GRID DECLARATION].Pageable(p=> p.Refresh(true))

実際には、それらは異なります：

• $('#GridName').data('kendoGrid').dataSource.read()uidテーブル行の属性を更新します

• $('#GridName').data('kendoGrid').refresh() 同じuidを残す

必要なのは、イベント .Events（events => events.Sync（ "KendoGridRefresh"）） をkendoGridバインディングコードに追加することだけです。更新コードをajaxの結果に記述する必要はありません。

@(Html.Kendo().Grid<Models.DocumentDetail>().Name("document")
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Model(model => model.Id(m => m.Id))        
    .Events(events => events.Sync("KendoGridRefresh"))    
    )
      .Columns(columns =>
      {
          columns.Bound(c => c.Id).Hidden();              
          columns.Bound(c => c.UserName).Title(@Resources.Resource.lblAddedBy);                           
      }).Events(e => e.DataBound("onRowBound"))
          .ToolBar(toolbar => toolbar.Create().Text(@Resources.Resource.lblNewDocument))
          .Sortable()          
          .HtmlAttributes(new { style = "height:260px" })          
  )

また、任意の.jsファイルに次のグローバル関数を追加できます。したがって、プロジェクト内のすべての剣道グリッドに対してそれを呼び出して、剣道グリッドを更新できます。

function KendoGridRefresh() {
    var grid = $('#document').data('kendoGrid');
    grid.dataSource.read();
}

私の場合、毎回アクセスするカスタムURLがありました。結果のスキーマは同じままですが。
私は以下を使用しました：

var searchResults = null;
$.ajax({
        url: http://myhost/context/resource,
        dataType: "json",
        success: function (result, textStatus, jqXHR) {
            //massage results and store in searchResults
            searchResults = massageData(result);
        }
    }).done(function() {
        //Kendo grid stuff
        var dataSource = new kendo.data.DataSource({ data: searchResults });
        var grid = $('#doc-list-grid').data('kendoGrid');
        dataSource.read();
        grid.setDataSource(dataSource);
    });

以下の行を使用できます

$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

自動更新機能については、こちらをご覧ください

以下のコードを使用することにより、グリッドのreadメソッドを自動的に呼び出し、グリッドを再び塗りつぶします

$('#GridName').data('kendoGrid').dataSource.read();

グリッドをリロードする別の方法は

$("#GridName").getKendoGrid().dataSource.read();

いつでも使用できます$('#GridName').data('kendoGrid').dataSource.read();。あなたは本当に.refresh();その後にする必要.dataSource.read();はありません、トリックを行います。

グリッドをより角度のある方法で更新したい場合は、次のようにします。

<div kendo-grid="vm.grid" id="grid" options="vm.gridOptions"></div>

vm.grid.dataSource.read();`

または

vm.gridOptions.dataSource.read();

そして、データソースをkendo.data.DataSourceタイプとして宣言することを忘れないでください

Jquery .ajaxを使用してデータを取得しました。現在のグリッドにデータをリロードするには、次のことを行う必要があります。

.success (function (result){
    $("#grid").data("kendoGrid").dataSource.data(result.data);
})

グリッドを更新したら1ページに戻りたいのですが。read（）関数を呼び出すだけで、新しい結果にそれほど多くのページがない場合でも、現在のページにとどまります。データソースで.page（1）を呼び出すと、データソースが更新され、ページ1に戻りますが、ページングできないグリッドでは失敗します。この関数は次の両方を処理します。

function refreshGrid(selector) {
     var grid = $(selector);
     if (grid.length === 0)
         return;

     grid = grid.data('kendoGrid');
     if (grid.getOptions().pageable) {
         grid.dataSource.page(1);
     }
     else {
         grid.dataSource.read();
     }
}

グリッドが新しい読み取り要求と共に再レンダリングされる完全な更新を行うには、次の操作を実行できます。

 Grid.setOptions({
      property: true/false
    });

プロパティは任意のプロパティにすることができます（例：ソート可能）

コードの下に書くだけ

$('.k-i-refresh').click();

$("#theidofthegrid").data("kendoGrid").dataSource.data([ ]);

あなたは試すことができます：

    $('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

グリッドが時間ベースで自動的に更新されるようにしたい場合は、間隔を30秒に設定した次の例を使用できます。

   <script type="text/javascript" language="javascript">
      $(document).ready(function () {
         setInterval(function () {
            var grid = $("#GridName").data("kendoGrid");
            grid.dataSource.read();
         }, 30000);
      });
   </script>

ウィジェットのデフォルト/更新された構成/データは、関連するDataSourceに自動的にバインドするように設定されています。

$('#GridId').data('kendoGrid').dataSource.read();
$('#GridId').data('kendoGrid').refresh();

新しいパラメーターを読み取りアクションに送信し、ページを好きなように設定して、グリッドを更新することもできます。

var ds = $("#gridName").data("kendoGrid").dataSource;
ds.options.page = 1;
var parameters = {
    id: 1
    name: 'test'
}
ds.read(parameters);

この例では、グリッドの読み取りアクションが2つのパラメーター値によって呼び出され、結果を取得した後、グリッドのページングは​​1ページ目にあります。

リフレッシュする最も簡単な方法は、refresh（）関数を使用することです。それは次のようになります：

$('#gridName').data('kendoGrid').refresh();

このコマンドを使用してデータソースを更新することもできます。

$('#gridName').data('kendoGrid').dataSource.read();

後者は実際にはグリッドのデータソースを再ロードします。両方の使用は、ニーズと要件に応じて行うことができます。

$("#grd").data("kendoGrid").dataSource.read();