Rechargement / rafraîchissement de la grille de Kendo

Comment recharger ou actualiser une grille de Kendo en utilisant Javascript?

Il est souvent nécessaire de recharger ou d'actualiser une grille après un certain temps ou après une action de l'utilisateur.

Vous pouvez utiliser

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

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

Je ne fais jamais de rafraîchissement.

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

seul fonctionne pour moi tout le temps.

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

Dans un projet récent, j'ai dû mettre à jour la grille d'interface utilisateur de Kendo en fonction de certains appels, qui se produisaient sur certaines listes déroulantes. Voici ce que j'ai fini par utiliser:

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

Espérons que cela vous fera gagner du temps.

Pas une seule de ces réponses n'obtient le fait que readrenvoie une promesse, ce qui signifie que vous pouvez attendre que les données se chargent avant d'appeler refresh.

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

Cela n'est pas nécessaire si votre capture de données est instantanée / synchrone, mais il est plus que probable qu'elle provienne d'un point de terminaison qui ne reviendra pas immédiatement.

Si vous ne souhaitez pas avoir de référence à la grille dans le gestionnaire, vous pouvez utiliser ce code:

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

Cela rafraîchira la grille, s'il y a un bouton d'actualisation. Le bouton peut être activé comme ceci:

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

En fait, ils sont différents:

• $('#GridName').data('kendoGrid').dataSource.read()actualise les uidattributs de la ligne du tableau

• $('#GridName').data('kendoGrid').refresh() laisse le même uid

Ce que vous devez faire est simplement d'ajouter un événement .Events (events => events.Sync ("KendoGridRefresh")) dans votre code de liaison kendoGrid. Pas besoin d'écrire le code d'actualisation dans le résultat 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" })          
  )

Et vous pouvez ajouter la fonction globale suivante dans n'importe lequel de vos fichiers .js. Ainsi, vous pouvez l'appeler pour toutes les grilles de kendo de votre projet afin de rafraîchir le kendoGrid.

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

Dans mon cas, j'avais une URL personnalisée à chaque fois; bien que le schéma du résultat reste le même.
J'ai utilisé ce qui suit:

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

Vous pouvez utiliser les lignes ci-dessous

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

Pour une fonction d'actualisation automatique, regardez ici

En utilisant le code suivant, il a automatiquement appelé la méthode de lecture de la grille et à nouveau remplir la grille

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

Une autre façon de recharger la grille est

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

Vous pouvez toujours utiliser $('#GridName').data('kendoGrid').dataSource.read();. Vous n'avez pas vraiment besoin de le faire .refresh();après cela, .dataSource.read();fera l'affaire.

Maintenant, si vous souhaitez actualiser votre grille de manière plus angulaire, vous pouvez faire:

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

vm.grid.dataSource.read();`

OU

vm.gridOptions.dataSource.read();

Et n'oubliez pas de déclarer votre source de données comme kendo.data.DataSourcetype

J'ai utilisé Jquery .ajax pour obtenir des données. Afin de recharger les données dans la grille actuelle, je dois faire ce qui suit:

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

Je veux revenir à la page 1 lorsque j'actualise la grille. Le simple fait d'appeler la fonction read () vous gardera sur la page actuelle, même si les nouveaux résultats n'ont pas autant de pages. L'appel de .page (1) sur la source de données actualisera la source de données ET retournera à la page 1 mais échouera sur les grilles qui ne sont pas paginables. Cette fonction gère à la fois:

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

Afin de faire une actualisation complète, où la grille sera restituée avec une nouvelle demande de lecture, vous pouvez effectuer les opérations suivantes:

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

Où la propriété peut être n'importe quelle propriété, par exemple triable

Écrivez juste ci-dessous le code

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

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

Vous pouvez essayer:

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

Si vous souhaitez que la grille soit automatiquement actualisée sur une base chronométrée, vous pouvez utiliser l'exemple suivant avec un intervalle de 30 secondes:

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

La configuration / les données par défaut / mises à jour des widgets sont définies pour se lier automatiquement à une source de données associée.

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

Vous pouvez également actualiser votre grille en envoyant de nouveaux paramètres à l'action Lire et en définissant les pages comme vous le souhaitez:

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

Dans cet exemple, l'action de lecture de la grille est appelée par la valeur de 2 paramètres et après avoir obtenu le résultat, la pagination de la grille est à la page 1.

Le moyen le plus simple d'actualiser est d'utiliser la fonction refresh (). Ce qui va comme:

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

tandis que vous pouvez également actualiser la source de données à l'aide de cette commande:

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

Ce dernier recharge en fait la source de données de la grille. L'utilisation des deux peut être faite selon vos besoins et vos exigences.

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