web-dev-qa-db-ja.com

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

Javascriptを使用してKendo Gridをリロードまたは更新する方法

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

kendo-uikendo-grid
152
Oxon

あなたが使用することができます

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

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

私は決してリフレッシュしません。

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

一人で私のためにいつも働いています。

54
Purna Pilla
$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
29
Oxon

最近のプロジェクトでは、ドロップダウン選択で発生していたいくつかの呼び出しに基づいて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);
    });

うまくいけば、これで時間が節約できます。

22
asuciu

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

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

  • $('#GridName').data('kendoGrid').refresh()は同じUIDを残します

7
Ignas Paplauskas

ハンドラ内でグリッドへの参照を取得したくない場合は、次のコードを使用できます。

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

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

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

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

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

データ取得がインスタント/同期の場合はこれは不要ですが、おそらくそれはすぐには返されないエンドポイントからのものです。

6
Zachary Dow

私の場合、私は毎回行くカスタム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);
    });
6
Amit Kapoor

あなたがしなければならないのは、単にあなたのkendoGridバインディングコードにイベントを追加することです（events => events.Sync（ "KendoGridRefresh"））。 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ファイルのどれにでも以下のGlobal関数を追加することができます。そのため、kendoGridを更新するには、プロジェクト内のすべてのkendoグリッドに対してそれを呼び出すことができます。

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

データを取得するためにJquery .ajaxを使用しました。データを現在のグリッドに再ロードするために、私は以下をする必要があります：

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

グリッドを更新したら、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();
     }
}
3
AndyMcKenna

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

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

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

3
Faran Shabbir

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

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

あなたはいつでも$('#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型として宣言することを忘れないでください

3
Kristy Kavada

あなたは以下の行を使用することができます

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

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

3
Nitin Rawat

次のコードを使うことで自動的にgridのreadメソッドと呼ばれ、再びgridを埋めます

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

グリッドを定期的に自動的に更新するには、次の例を使用します。間隔は30秒に設定されています。

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

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

    $('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();
2
Kunvar Singh
$("#theidofthegrid").data("kendoGrid").dataSource.data([ ]);
1
Brownbagger11

以下のコードを書くだけ

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

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

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

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

1
sajadre

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

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

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

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

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

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

後者は実際にグリッドのデータソースをリロードします。両方の使用はあなたの必要性と要件に従って行うことができます。

0
jishuraajnath