This is a migrated thread and some comments may be shown as answers.

Pager info text "Page X of Y"

6 Answers 486 Views
Grid
This is a migrated thread and some comments may be shown as answers.
malcolm
Top achievements
Rank 1
malcolm asked on 27 Jul 2018, 09:55 AM

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.

6 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 30 Jul 2018, 05:37 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Michael
Top achievements
Rank 1
answered on 10 Sep 2018, 02:11 PM

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

0
Eyup
Telerik team
answered on 12 Sep 2018, 01:45 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Michael
Top achievements
Rank 1
answered on 12 Sep 2018, 01:49 PM

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

0
Eyup
Telerik team
answered on 14 Sep 2018, 01:20 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Michael
Top achievements
Rank 1
answered on 14 Sep 2018, 01:27 PM
Works Perfectly Eyup, thank you!
Tags
Grid
Asked by
malcolm
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Michael
Top achievements
Rank 1
Share this question
or