Come ottenere i dati visualizzati di KendoGrid in formato json?

Question

Ho un kendoGrid e vorrei ottenere il JSON fuori di esso dopo il filtraggio e l'ordinamento come faccio a raggiungere questo?

qualcosa di simile a quanto segue,

var grid = $("#grid").data("kendoGrid"); 

alert(grid.dataSource.data.json); // I could dig through grid.dataSource.data and I see a function (.json doen't exist I put it there so you know what i want to achieve) 

Grazie ogni aiuto è molto apprezzato!

Answer 1

Penso che tu sia alla ricerca di

var displayedData = $("#YourGrid").data().kendoGrid.dataSource.view() 

Poi stringa i come segue:

var displayedDataAsJSON = JSON.stringify(displayedData); 

Spero che questo aiuti!

Answer 2

Se si desidera ottenere tutte le pagine dei dati filtrati è possibile utilizzare questo:

var dataSource = $("#grid").data("kendoGrid").dataSource; 
var filters = dataSource.filter(); 
var allData = dataSource.data(); 
var query = new kendo.data.Query(allData); 
var data = query.filter(filters).data; 

Assicurarsi di verificare se esistono filtri prima di provare ad applicarle o Kendo si lamenterà.

Answer 3

Per ottenere conteggio di tutte le righe nella griglia

$('#YourGridName').data("kendoGrid").dataSource.total() 

Per ottenere elementi riga specifica

$('#YourGridName').data("kendoGrid").dataSource.data()[1] 

Per ottenere tutte le righe nella griglia

$('#YourGridName').data("kendoGrid").dataSource.data() 

JSON per tutte le righe nella griglia

JSON.stringify($('#YourGridName').data("kendoGrid").dataSource.data()) 

Answer 4

Per la parte JSON, c'è una funzione di supporto per estrarre i dati in formato JSON che possono aiutare:

var displayedData = $("#YourGrid").data().kendoGrid.dataSource.view().toJSON() 

EDIT: dopo alcuni errori con il metodo di cui sopra a causa di un comportamento griglia di kendo, ho trovato questo articolo che risolve il problema: Kendo DataSource view not always return observablearray

Answer 5

Qualcosa di simile, per visualizzare solo i dati che vengono visualizzati al momento. Estesa anche la griglia per fornire queste funzioni in tutta l'app.

/** 
* Extends kendo grid to return current displayed data 
* on a 2-dimensional array 
*/ 
var KendoGrid = window.kendo.ui.Grid; 
KendoGrid.fn.getDisplayedData = function(){ 
    var items = this.items(); 
    var displayedData = new Array(); 
    $.each(items,function(key, value) { 
     var dataItem = new Array(); 
     $(value).find('td').each (function() { 
      var td = $(this); 
      if(!td.is(':visible')){ 
       //element isn't visible, don't show 
       return;//continues to next element, that is next td 
      } 
      if(td.children().length == 0){ 
       //if no children get text 
       dataItem.push(td.text()); 
      } else{ 
       //if children, find leaf child, where its text is the td content 
       var leafElement = innerMost($(this)); 
       dataItem.push(leafElement.text()); 
      } 
     }); 
     displayedData.push(dataItem); 
    }); 
    return displayedData; 
}; 

KendoGrid.fn.getDisplayedColumns = function(){ 
    var grid = this.element; 
    var displayedColumns = new Array(); 
    $(grid).find('th').each(function(){ 
     var th = $(this); 
     if(!th.is(':visible')){ 
      //element isn't visible, don't show 
      return;//continues to next element, that is next th 
     } 
     //column is either k-link or plain text like <th>Column</th> 
     //so we extract text using this if: 
     var kLink = th.find(".k-link")[0]; 
     if(kLink){ 
      displayedColumns.push(kLink.text); 
     } else{ 
      displayedColumns.push(th.text()); 
     } 

    }); 
    return displayedColumns; 
}; 

/** 
* Finds the leaf node of an HTML structure 
*/ 
function innerMost(root) { 
    var $children = $(root).children(); 

    while (true) { 
     var $temp = $children.children(); 
     if($temp.length > 0) $children = $temp; 
     else return $children; 
    } 
}