loadMore and grouped ListViews

[Erik]

Hey there,

I'm working on a messaging module that groups messages into date "categories," similar to something that you would find in Outlook Express (Today, Yesterday, Last Week etc...).

The ListView works wonderfully with a grouped dataSource, but I'm having trouble putting it all together with a loadMore button. When the button is pressed the older messages are loaded just fine, but a new ListView header template is being rendered for the new items, even if they are within the same grouping as the previous items. This results in potentially having multiple headers for each grouping, defeating the purpose of the grouped data in the first place.

Is there any way I can work around this and have the ListView items group themselves properly after pressing the loadMore button?

Thanks for any advice you can give!

- Erik

[Georgi Krustev]

Hi Erik,

 
The "Load more" functionality, like the "Endless scrolling", makes request (if Ajax binding is used) for the next page. The DataSource of the ListView persists only the data returned from the last request. If the "Load more" functionality is used along with grouping then the newly loaded page will be grouped separately and appended to the end of the ListView. This is the expected behavior. If you need to avoid the multple headers then you need to refresh the ListView manually. Here I prepared a simple jsBin demo for you. Note that on every click the whole ListView is re-rendered.

Regards,
Georgi Krustev
the Telerik team