Displaying the Item Count in the Footer of a Grid with Virtual Scrolling

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

How can I display the count of the items inside the footer of a Grid component with virtual scrolling enabled?

Solution

To display the item count in the footer of a Grid with virtual scrolling:

1. Handle the built-in DataStateChangeEvent to track the current state of the Grid and use the skip and take properties to update the displayed item range accordingly.

ts

public dataStateChange(event: DataStateChangeEvent): void {
    ...
    this.start = event.skip;
    this.end = event.skip + event.take;
}

2. Utilize the FooterTemplateDirective to display the current item range as well as the total items inside the Grid component.

html

<ng-template kendoGridFooterTemplate>
  {{ start }}-{{ end }} of {{ total }} items
</ng-template>

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

See Also

• Grid Overview
• API Reference of the Grid Component
• Grid Virtual Scrolling