Grille de Kendo rechargeable / rafraîchissante

Vous pouvez utiliser

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

Je ne rafraîchit jamais.

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

seul travaille 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 grid de l’interface utilisateur de Kendo en fonction de certains appels, qui se produisaient sur certaines sélections de 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); }); 

J’espère que cela vous fera gagner du temps.

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

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

Cela actualisera la grid s’il existe un bouton d’actualisation. Le bouton peut être activé comme ceci:

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

Il vous suffit d’append un événement .Events (events => events.Sync (“KendoGridRefresh”)) dans votre code de liaison kendoGrid. Il n’est pas nécessaire d’écrire le code de rafraîchissement dans le résultat ajax.

 @(Html.Kendo().Grid().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() .HtmlAtsortingbutes(new { style = "height:260px" }) ) 

Et vous pouvez append la fonction Global suivante dans n’importe quel fichier .js. Vous pouvez donc l’appeler pour toutes les grids 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 rest 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); }); 

En fait, ils sont différents:

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

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

Vous pouvez utiliser les lignes ci-dessous

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

Pour une fonction de rafraîchissement automatique, regardez ici

En utilisant le code suivant, il appelle automatiquement la méthode de lecture de la grid et remplit à nouveau la grid.

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

Une autre façon de recharger la grid est

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

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

Maintenant, si vous souhaitez actualiser votre grid de manière plus angular, vous pouvez:

 
 vm.grid.dataSource.read();` 

OU

 vm.gridOptions.dataSource.read(); 

Et n’oubliez pas de déclarer votre source de données en tant kendo.data.DataSource type kendo.data.DataSource

J’ai utilisé Jquery .ajax pour obtenir des données. Pour recharger les données dans la grid actuelle, je dois procéder comme suit:

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

Aucune de ces réponses n’obtient le fait que read renvoie une promesse, ce qui signifie que vous pouvez attendre le chargement des données avant d’appeler refresh.

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

Cela n’est pas nécessaire si votre saisie de données est instantanée / synchrone, mais il est plus que probable qu’elle provient d’un sharepoint terminaison qui ne sera pas renvoyé immédiatement.

Je veux revenir à la page 1 lorsque je rafraîchit la grid. Il suffit d’appeler la fonction read () pour restr sur la page en cours, même si les nouveaux résultats ne contiennent pas autant de pages. Appeler .page (1) sur la source de données actualisera la source de données ET reviendra à la page 1, mais échouera sur les grids non paginables. Cette fonction gère les deux:

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

Pour effectuer un rafraîchissement complet, où la grid 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 sortingable

Il suffit d’écrire ci-dessous le code

 $('.ki-refresh').click(); 

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

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

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

Vous pouvez essayer:

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

Si vous souhaitez que la grid soit automatiquement actualisée sur une base chronométrée, vous pouvez utiliser l’exemple suivant dont l’intervalle est défini sur 30 secondes:

Le moyen le plus simple de rafraîchir consiste à utiliser la fonction refresh (). Qui va comme:

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

pendant que vous pouvez également actualiser la source de données en utilisant cette commande:

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

Ce dernier recharge effectivement la source de données de la grid. L’utilisation des deux peut être faite en fonction de vos besoins et exigences.

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