The ListView component currently has an endless scrolling feature that allows the developer to load more items on demand. However, when all items are loaded upon continuous scrolling, there can be some issues in performance due to the large number of rendered DOM elements at the same time.
For this reason, providing a virtualization functionality that renders only a limited number of elements at a time will be useful in improving the performance of the ListView when a large number of items are used.
Provide a pager template to customize the pager elements of the ListView, or another mechanism to change the labels ('items per page', 'n-n of n items').
Here is a simple example:
HTML:
<kendo-listview
[height]="400"
[data]="notes$ | async"
class="k-d-flex-overflow-auto"
(scrollBottom)="loadMore()">
<ng-template kendoListViewHeaderTemplate>
<span title>Reminders</span>
</ng-template>
<ng-template kendoListViewItemTemplate let-dataItem="dataItem">
<app-message-note [note]="dataItem"></app-message-note>
</ng-template>
</kendo-listview>
TS:
@Component({
selector: 'app-message-list',
templateUrl: `./message-list.component.html`,
styles: [
`
.k-d-flex-overflow-auto {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
overflow: auto;
}
`,
],
})
export class MessageListComponent implements OnInit {
notes$: Observable<NoteDto[]>;
constructor(private replyService: ReplyNoteService) {}
ngOnInit(): void {
this.notes$ = this.replyService.getUserNotesList();
}
loadMore() {
console.log('loading...');
}
}
Without these styles scroll is not visible.
Current behavior: scroll to the bottom, nothing happens.
Expected behavior: scroll to the bottom "loading..." will be logged to the browser console.
Ts Code:
Html code:
Hi Team,
I would like to be able to export the ListView component to PDF. Currently, this could be achieved by using the PDF Export standalone component:
https://www.telerik.com/kendo-angular-ui/components/pdf-export/
When it comes to pageable ListView, the PDF Export component should export hidden content, which required defining two ListViews.
Best regards!