Pager info text "Page X of Y"

[malcolm]

How can I change the info text on the pager bar so instead of saying 1 - 10 of 219 items it says Page 1 of 21"

The documentation seems to suggest this is possible via the "Of" property, but I can only make it show the row count or nothing.

-------------------

The Messages method configures all messages displayed by the pager. Use this setting to override the default messages or to localize the pager.

The available messages are:
Display
Empty
First
ItemsPerPage
Last
Next
Of
Page
Previous
Refresh
Display
The Display method sets the pager info message. By default, it is set to "{0} - {1} of {2} items". The placeholders represent the first item in the page, the last item in the page, and the total number of items in the Grid.
The following example demonstrates how to set the display message.

[Eyup]

Hi Malcolm,

The setting you are looking for is called display:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/pageable.messages#pageable.messages.display

In MVC definition it would look like this:

.Pageable(p => p.Messages(m => m.Display("Items {0} - {1} from total {2} records")))

If you want to display the total number of pages and not records, you can use the following approach to achieve this:

.Pageable(p => p.Messages(m => m.Display("")))
.Events(e => e.DataBound("gridDataBound"))

JavaScript:

function gridDataBound(e) {
    setTimeout(function () {
        var grid = e.sender;
        grid.element.find(".k-pager-info").text(
            kendo.format("Page {0} of total {1} pages",
            grid.pager.page(), grid.pager.totalPages()));
    }, 2);
}

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

[Michael]

Hey Eyup, Is there a way to apply the principles you've shown here, but instead show a filtered count in relation to the non filtered count?  So for example show something like "1 - 10 of 300 Filtered results of 5000 total"?  We are using a menu filtering and I'm trying to make sure the user is always aware they are looking at a filtered result vs non filtered.

 

Thanks!

Mike

[Eyup]

Hello Mike,

You can modify the following line as follows to achieve this requirement:

grid.element.find(".k-pager-info").text(
    kendo.format("{0} - {1} of {2} Filtered results of {3} total",
    grid.pager.page(), grid.pager.totalPages(), grid.dataSource.total(), grid.dataSource.data().length));

That should do the trick. You can also apply styling to header cells if you want to make aware the user for applied filtering.

Regards,
Eyup
Progress Telerik

[Michael]

Eyup, Sorry I should of been more clear.  I would like to show number of ITEMS, not Pages.  Thank you so much for your example, but could you show me how to do it with Items?

 

Thanks!

Mike

[Eyup]

Hi Mike,

Here is how you can present this information:

function gridDataBound(e) {
    setTimeout(function () {
        var grid = e.sender;

        var firstItemIndex = (grid.pager.page() - 1) * grid.pager.pageSize() + 1;
        var lastItemIndex = (grid.pager.page() - 1) * grid.pager.pageSize() +
            grid.dataSource.view().length;
        var filteredTotal = grid.dataSource.total();
        var databaseTotal = grid.dataSource._pristineTotal;

        grid.element.find(".k-pager-info").text(
            kendo.format("{0} - {1} of {2} Filtered results of {3} total",
            firstItemIndex, lastItemIndex, filteredTotal, databaseTotal));
    }, 2);
}

Give it a try and let me know if it works for you.

Regards,
Eyup
Progress Telerik

[Michael]

Works Perfectly Eyup, thank you!