Nous avons voulu mettre en place un scroll infini sur une ListView de la bibliothèque kendo. Malheureusement ce scroll infini n’existe que sur la version mobile de la bibliothèque kendo, nous avons donc dû nous en fabriquer une à la mano.
D’abord, nous avons mis en place notre cshtml avec notre listview (listViewResults), notre template pour nos résultats (resultAvecTemplate) et une div (divResult) que l’on remplira avec nos résultats pour créer l’effet de scroll infini.
Ensuite, nous créons notre Partial (_ResultItem) avec le template pour formater les résultats :
Puis, nous allons nous occuper de la partie javascript, que nous allons détailler ensuite.
Tout d’abord, nous allons "binder" une action sur le scroll de la page, qui permettra de relancer le chargement du datasource de notre ListView lorsque l’on est en bas de notre page :
Puis dans le "onListViewDatabound" ̎, nous allons vérifier que nous sommes sur une nouvelle page du datasource et si c’est le cas nous allons déplacer les résultats un par un de notre Listview (listViewResults) vers la div de result (divResult) :
Voila, comment nous avons réussi à mettre en place un scoll infini sur une Listview en attendant et en espérant que Kendo l'implémente nativement dans le futur comme pour la version mobile de cet élément.