2012-11-22 12 views
5

Ich habe folgendes Szenario:KendoUI: Zurücksetzen Rasterdaten zur ersten Seite nach Button-Klick

in meiner Seite, die ich ein Gitter habe (mit Paginierung) begrenzt zu einer Datenquelle. Wenn ich auf die Schaltfläche "Extrahieren" klicke, wird das Raster gefüllt (paginierte Daten werden über einen Web-Service gelesen). Dann wähle ich "Seite 2" durch Raster Paginierung. Der Web-Service wird erneut aufgerufen, um Daten zurückzugeben.

Jetzt: Ich möchte noch einmal auf "Extract" klicken, um Daten auf der ersten Seite neu zu laden und anzuzeigen. Ich bin mir nicht sicher, welcher der beste Weg ist.

Ich möchte nur einen Aufruf an den Dienst (mit Eingabeparametern) und haben Paginierungsindex im Raster zurückgesetzt.

verwende ich jetzt den folgenden Code:

$("#btnExtract").bind("click", function(e) { 
    var grid = $("#section-table").data("kendoGrid"); 
    grid.dataSource.read({parameter: "value"}); 
    grid.dataSource.page(1); 
}); 

aber es macht tatsächlich zwei Anrufe zu dem Dienst.

Antwort

14

Wenn Sie Server-Seiten-Paging tun, sollte es ausreichen, grid.dataSource.page(1) zu tun, da dies die read genau wie Sie bereits realisiert aufrufen wird.

+0

Danke, aber wenn ich auch Parameter mit te Anfrage senden möchte? –

+0

Sie können der Eigenschaft '$ grid.data' ('kendoGrid'). DataSource.transport.options.read.url 'Parameter hinzufügen, indem Sie eine neue Datenquellen-URL erstellen. –

+0

Es hat funktioniert. Danke für die einfache Lösung –

0

Definieren Sie eine parameterMap für die DataSource-Leseoperation Ihres Kendo-Grids. Diese wird wie unten gezeigt in das Transportelement eingefügt. Rufen Sie dann grid.dataSource.page (1) auf, dies wird als read aufgerufen und Sie sollten sortiert sein.

new kendo.data.DataSource({  
transport: { 
        read: { 
          // ur read 
          }, 
      parameterMap: function (o, operation) { 
         var output = null; 
         switch (operation) { 
            case "create": 
            break; 
           case "read": 
            output = {parameter: "value"}; 
            break; 
           case "update": 
            break; 
           case "destroy": 
            break; 
         } 
        return output;    }}}); 
+0

Bedeutet das, dass ich das Input-Parameter-Objekt (ich meine '{Parameter: "Wert"}') in einem externen Objekt, irgendwo global zugänglich, im Code definieren? Ich benutzte "read()", nur weil ich die Eingabe in der parameterMap aktualisieren konnte, indem ich nur Daten dorthin schickte. –

2

Um nur eine einzige Anforderung führen Sie die query Methode von der Datenquelle verwendet werden soll. Es ermöglicht Ihnen die Kombination der verschiedenen Methoden wie Filter/Seite zu erstellen/Art usw.

Zum Beispiel:

dataSource.query({ page: 5, pageSize: 20, sort: { field: "orderId", dir: "asc" } }); 
11

Aus irgendeinem Grund, wenn die Seite auf 1 gesetzt ist und Sie es wieder auf 1 gesetzt Es wird gelesen. Wenn es etwas anderes als 1 ist und Sie es auf 1 setzen, wird es nur auf diese Seite gehen und nicht lesen. Also um Ihre Frage zu beantworten, können Sie diesen Code verwenden:

if (grid.dataSource.page() != 1) { 
    grid.dataSource.page(1); 
} 
grid.dataSource.read({parameter: "value"}); 
+1

Diese Antwort funktionierte für mich und der Kommentar markiert als die Lösung nicht. – mgmedick

+2

Definitiv richtige Antwort – Fabio

+0

Wirf die 'grid.dataSource.read ({parameter:" value "});' in einem 'else' Block, um einen doppelten Treffer auf deinem Server zu verhindern, wenn die Seite nicht 1 ist. – MalibuCusser

2

Verwenden Sie die DataSource.query() -Methode die Seitennummer und Ihre benutzerdefinierten Eingabeparameter übergeben:

$("#btnExtract").bind("click", function(e) { 
    var grid = $("#section-table").data("kendoGrid"); 
    grid.dataSource.query({ page: 1, parameter: "value"}); 
}); 

Wenn Sie mit serverseitige Paging und Sortierung, dann müssen Sie möglicherweise auch diese Informationen einschließen:

$("#btnExtract").bind("click", function(e) { 
    var grid = $("#section-table").data("kendoGrid"); 

    var queryParams = { 
     page: 1, 
     pageSize: grid.dataSource.pageSize(), 
     sort: grid.dataSource.sort(), 
     group: grid.dataSource.group(), 
     filter: grid.dataSource.filter(), 
     parameter: "value" 
    }; 

    grid.dataSource.query(queryParams); 
});