Implementazione di scroll infiniti con visualizzazione elenco web

Question

Sono consapevole che la versione Web di listview non ha una funzione di scorrimento senza fine fuori dalla scatola come quella mobile. Devo ancora implementarlo nella mia soluzione e non sono sicuro di dove cominciare. Tutti i miei ID mi richiederebbero di ricaricare nuovamente tutti i dati. Quindi diciamo che ho caricato 25 righe. Raggiungi il punto di scorrimento e ne carica altri 25, il modo in cui lo implementerei ricaricherebbe i primi 25 e ne aggiungerà altri 25. Questo ovviamente rallenterebbe più giù, quindi non è un'opzione Ha qualcuno ha fatto qualcosa del genere con successo? Sono disponibili buone soluzioni di scorrimento continuo open source? Qualsiasi consiglio/info/codice sarebbe apprezzato.

Grazie!

Answer 1

alla fine ho si avvicinò con una soluzione per questo. Lo scrolling virtuale con una griglia non era quello che stavo cercando. Ho abbandonato listview e ho usato un'origine dati e un semplice rendering di template di kendo.

Ecco come funziona ... Ho un genitore div per i miei dati. Allego un evento al mio evento di modifica dell'origine dati e una volta che viene letta una nuova pagina di dati, il div genitore ottiene un div figlio aggiunto all'interno del quale viene visualizzata la nuova pagina di dati. Questo funziona perfettamente per me finora.

quindi il mio DOM è simile a questo.

<div id="EndlesslyScrollabledata" > 
    <div id="DataPage1"> 
     ..... 
    </div> 
    <div id="DataPage2"> 
     ..... 
    </div> 
</div> 
<button> Load more data </button> 

ogni clic sul carico più dati dovrebbero spostare l'origine dati alla pagina successiva, aggiungere il prossimo "DataPage" e rendere il modello con i dati all'interno del aggiunto "DataPage".

Answer 2

Questa funzione è disponibile nella griglia di Kendo nel Web (vedere esempi di scorrimento virtuale nel sito Web di Kendo). Che ne dici di utilizzare la griglia con lo scorrimento virtuale e modificare il modello di visualizzazione in modo che assomigli a listview?

Codice di esempio per lo scorrimento della griglia virtuale è:

$("#yourList").kendoGrid({ 
     dataSource: { 
      type: "json",     
      pageSize: 25, 
      transport: { 
       read: { 
        cache: false, 
        url: "controller/actionmethod", 
        type: "post", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json" 
       } 
      } 
     }, 

     height: 150, 
     width: 50, 
     pageable: true, 
     //selectable: "multiple", 
     scrollable: { 
      virtual: true 
     }, 

     columns: [ { field: "col1", title: "col1" }] 

    }); 

Answer 3

Sono venuto a una soluzione che utilizza l'evento dataBinging per emulare questo comportamento:

Codice MVC:

@(Html.Kendo().ListView<your.custom.Class>() 
    .Name("searchResults") 
    .TagName("div") 
    .ClientTemplateId("tptSearchResult") 
    .DataSource(source => 
    { 
     source.Read(read => 
     { 
      read.Action("Search", "ControllerName").Data("searchResults_AdditionalData"); 
     }); 


    }) 
) 

Si dovrebbe utilizzare il metodo "AdditionalData", se si desidera inviare i parametri di ricerca o qualcosa in più per il servizio di ricerca.

codice JavaScript:

function Search(page) { 
    currentPage = page; 
    if(page == 1) { 
     searchResults = []; 
    } 

    $("#searchResults").data("kendoListView").dataSource.read(); 
} 

function searchResults_AdditionalData(ev) { 
    return { 
     code: $("#txtSearchCode").val(), 
     pageNumber: currentPage, 
     pageSize: pageSize 
    }; 
} 

var currentPage = 1; 
var pageSize = 20; 
var searchResults = []; 
$(document).ready(function() { 

    $("#searchResults").data("kendoListView").bind("dataBinding", function(ev) { 

     if(searchResults.length != (currentPage * pageSize)) { 
      if(!!ev && !!ev.items && ev.items.length == pageSize) { 
       $("#btnLoadMoreData").show(); 
      } else { 
       $("#btnLoadMoreData").hide(); 
      } 

      searchResults = $.merge(searchResults, ev.items); 
      this.dataSource.data(searchResults); 
      this.dataSource.sync(); 
     } 

    }); 
}); 

Una sola cosa che rimane: scorrere fino al primo elemento aggiunto nella lista dopo la sincronizzazione.