Scroll infini d’une ListView de la bibliothèque Kendo

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.

Sans titre1

Ensuite, nous créons notre Partial (_ResultItem) avec le template pour formater les résultats :

Sans titre2

Puis, nous allons nous occuper de la partie javascript, que nous allons détailler ensuite.

Sans titre3

 

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 :

Sans titre4

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) :

Sans titre5

 

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.