web-dev-qa-db-fra.com

Rechargement / rafraîchissement de la grille de Kendo

Comment recharger ou actualiser une grille de Kendo à l'aide de Javascript?

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

kendo-uikendo-grid
155
Oxon

Vous pouvez utiliser

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

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

Je ne rafraîchit jamais.

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

seul travaille pour moi tout le temps.

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

Dans un projet récent, j'ai dû mettre à jour la grille de Kendo UI en fonction de certains appels qui se produisaient dans 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);
    });

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

22
asuciu

Pas une seule 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 l'actualisation.

$('#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 noeud final qui ne reviendra pas immédiatement.

9
Zachary Dow

En fait, ils sont différents:

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

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

7
Ignas Paplauskas

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

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

Cela actualisera la grille s'il existe un bouton d'actualisation. Le bouton peut être activé comme suit:

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

Dans mon cas, j'avais une URL personnalisée à consulter à 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);
    });
6
Amit Kapoor

Ce que vous devez faire, c'est simplement 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 quel de vos fichiers .js. vous pouvez donc appeler toutes les grilles de kendo de votre projet pour actualiser le kendoGrid.

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

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

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

Je veux revenir à la page 1 lorsque j'actualise la grille. Le simple fait d'appeler la fonction read () vous gardera sur la page en cours, même si les nouveaux résultats ne comportent pas autant de pages. Appeler .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();
     }
}
3
AndyMcKenna

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

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

Où la propriété peut être une propriété par exemple. triable

3
Faran Shabbir

Une autre façon de recharger la grille est

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

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

Maintenant, si vous voulez actualiser votre grille de manière plus angular, 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 étant kendo.data.DataSource type

3
Kristy Kavada

Vous pouvez utiliser les lignes ci-dessous

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

Pour une fonctionnalité d'actualisation automatique, regardez ici

3
Nitin Rawat

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

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

Si vous souhaitez que la grille soit automatiquement actualisée dans un délai déterminé, vous pouvez utiliser l'exemple suivant, dans lequel l'intervalle est défini sur 30 secondes:

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

Vous pouvez essayer:

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

Il suffit d'écrire ci-dessous le code

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

Vous pouvez également actualiser votre grille en envoyant de nouveaux paramètres à l'action de lecture et en définissant des pages comme bon vous semble:

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.

1
sajadre

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();
1
parvezalam khan

Le moyen le plus simple d'actualiser consiste à utiliser la fonction refresh (). Qui va comme:

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

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

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

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

0
jishuraajnath