Kendo Grid - zeige Paginierung gesamt von JSON

Question

Ich entwickle ein Kendo Grid.In dieser Hauptreihe zeige ich den Dateityp und ihre Gesamtanzahl an und wenn diese Zeile erweitert wird, dann zeige alle Daten in Paginierung.

In meinem JSON, wenn meine Gesamtdaten 100 sind, dann sind in JSON nur 10 Daten vorhanden und wenn ich auf die nächste Seite klicke, bekomme ich die nächsten 10 JSON Daten.

Jetzt möchte ich das Gesamtergebnis für die Seitenumbruch festlegen, aber in meinem Beispiel, was ist das Problem, das ich nicht identifizieren kann.

Um dies zu zeigen, dass ich folgendes Beispiel verwendet - http://jsfiddle.net/lhoeppner/y6KdK/

In meinem Beispiel bin ich nicht sicher, dass meine Json falsch ist oder die aproach verwenden ich falsch ist.

EDIT Mein Code ist -

var jsonData = JSON.parse("{\"Report\":\"type1\",\"FileList\":[{\"owner\":\"machine-174\\\\admin\",\"path\":\"C:\\\\workarea\\\\WinTest1lakhfileinKB\\\\WinTest\\\\nGYh\\\\SMv\\\\U1P8FLx\\\\vMbhdo\\\\TgFSW\\\\42Ioulj0w.txt\"},{\"owner\":\"machine-174admin\",\"path\":\"C:\\\\workarea\\\\bada_data\\\\Employee Database - Copy (7) - Copy.mdb\"}],\"Count\":100,\"total\":10}"); 
$("#grid").kendoGrid({ 
      editable: false, 
      resizable: true, 
      filterable: true, 
      columns: [{ 
       field: "Report", 
       title: "Report" 
      }, { 
       field: "Count", 
       title: "Count" 
      }], 
      dataSource: { 
       data: jsonData, 
       schema: { 
        model: { 
         fields: { 
          Report: { 
           type: "string" 
          }, 
          Count: { 
           type: "number" 
          } 

         } 
        } 
       } 
      }, 
      detailInit: function (e) { 

       var dataSource = new kendo.data.DataSource({ 
        data: e.data.FileList, 

        aggregate: [{ 
         field: "size", 
         aggregate: "sum" 
        }], 
        schema:{ 
        total:"total" 
        }, 

        page: $("#grid").data("kendoGrid").dataSource.page(), 
        pageSize: 10, 
        resizable: true, 
        filterable: true, 
        scrollable: true 

       }); 
       dataSource.fetch(function() { 
        totalsize = null; 
        var result = null; 
        results = dataSource.aggregates().size; 
        totalsize = getSize(results.sum); 
       }); 

        childheader = "[{\"field\":\"path\",\"title\":\"Path\",\"width\":\"200px\"},{\"field\":\"owner\",\"title\":\"Owner\",\"width\":\"200px\"}]"; 
       var childhead = JSON.parse(childheader); 
       var dataSource = $("<div/>").appendTo(e.detailCell).kendoGrid({ 
        dataSource: { 
         data: e.data.FileList, 
         total:e.data.total, 
         editable: false, 
         pageSize: 10, 
         scrollable: true, 
         resizable: true, 
         filterable: true, 
         aggregate: [{ 
          field: "size", 
          aggregate: "sum" 
         }], 
         schema: { 
          total:"total", 
          parse: function (data) { 
           $.each(data, function (idx, elem) { 
            elem.size = getSize(elem.size); 
           }); 
           return data; 
          }, 
          model: { 
           fields: { 

            path: { 
             type: "string" 
            }, 

            owner: { 
             type: "string" 
            } 


           } 
          } 
         } 
        }, 

        columns: childhead, 
        sortable: true, 
        pageable: true, 
        resizable: true, 
        filterable: true, 
        scrollable: true, 
        serverPaging: false, 

        pageable: { 
          pageSize: 2, 
          refresh: true, 
          change:function(e){ 
            console.log("page change event"); 
          } 
        } 
       }); 

      } 
     }); 
     function getSize(val) { 
     var bytes = val; 
     var size = null; 
     var sizes = ['Bytes', 'KB', 'MB', 'GB']; 
     if (bytes > 0) { 
      var i = parseInt(Math.floor(Math.log(bytes)/Math.log(1024))); 
      size = Math.round(bytes/Math.pow(1024, i), 2) + ' ' + sizes[i]; 
      return size; 
     } 
    } 

Mein Beispiel ist hier - https://jsfiddle.net/pporwal26/2ub1rvc2/8/

In diesem Beispiel habe ich pro Seite angezeigt werden sollen 2-Daten und insgesamt 10 Seiten, auch wenn ich 2 haben Daten in Json und erhalten nächste Seite Daten durch Seitenwechsel-Funktion.

Answer 1

Alles, was Sie tun müssen, ist in einem Seitenformat und seitenwechselbar Attribut:

pageable: { 
     input: true, 
     numeric: false, 
     refresh: true, 
     pageSizes: true, 
     pageSize: 10 
    }, 

einfach Ihre Daten durch Ihre Datenquelle bringen, und es wird das Raster auf jeder Seite in Schritten von 10

eingestellt