Formatting numbers in grid pager

[Rachael]

I'm using version 2014.2.903 and I'm trying to format the numbers in the pager associated with my grid. The pager is showing 1-10 of 100000 and I would like to format the numbers so they have commas when appropriate. I tried accessing the pager information on the dataBound event, but unfortunately the pager hasn't been configured by the data from the datasource at that point so my changes get overwritten when the pager loads from the datasource.

I also tried doing something funky with the pageable: { messages: { of: "" } } configuration, but it's being ignored.

Here's my grid definition:

var grid = $("#grid").kendoGrid({
    name: "results",
    columns: columns,
    dataSource: new kendo.data.DataSource({
        type: "aspnetmvc-ajax",
        transport: {
            read: {
                url: "/Content/GetContent",
                type: "POST",
                dataType: "json",
                },
                error: function(xhr, error) {
                    alert("There was an error transporting the data from the server, likely because you've requested too much information. Try filtering the results further or selecting a smaller page size.");
                },
            },
        },
        pageSize: 10,
        serverPaging: true,
        serverSorting: true,
        schema: {
            total: "total",
            data: "data",
            model: {
                fields: {
                    Title: { type: 'string' },
                    Contributors: { type: 'string' },
                    ContentType: { type: 'string' },
                    IsForthcoming: { type: 'int' },
                    IsLive: { type: 'int' },
                    AlsoAvailableOn: { type: 'string' },
                    HasSecureCenterSetup: { type: 'int' },
                    SocrLink: { type: 'string' },
                    IsMarcRecord: { type: 'int' },
                    HasAssignment: { type: 'int' },
                    Size: { type: 'number' },
                    LastLoadedBy: { type: 'string' },
                    LastLoadedOn: { type: 'date', format: "{0:MM/dd/yyyy}" },
                    SeverityLevel: { type: 'number' },
                }
            }
        },
    }),
    pageable: { pageSizes: [10, 25, 50, 100] },
    sortable: true,
    scrollable: true,
    resizable: true,
    reorderable: true,
    dataBound: function(e) {
        if ($(".k-pager-sizes .l-viewall").length == 0) {
            $(".k-pager-sizes").append(' <input type="button" class="k-button k-button-icontext l-viewall" value="View All" />');
        }
        $(".l-viewall").click(function() {
            var dataSource = e.sender.dataSource,
                total = dataSource.total();

            dataSource.pageSize(total);
        });
    },
});

Any help would be greatly appreciated.

Rachael

[Rosen]

Hello Rachael,

You can change the text formatting via the pageable.messages.display option:

$("#grid").kendoGrid({
  pageable: {
    messages: {
      display: "{0} - {1} of {2:#,##} items"
    }
  },
  /*..*/
});

You can apply the supported formatting to the placeholders.

Regards,
Rosen
Telerik

 

 

[Brian Edwards]

Hi - I need to do the same thing for the Angular Kendo UI Grid.  How would I go about doing it for the Angular version?

[khush]

Hi Rosen Facing Similar issue,need total page number displayed to be comma separated ,above fix is not working ..?

[Rumen]

Hi Khush,

The solution provided by Rosen works as expected. Here is a dojo project which you can test:

 

https://dojo.telerik.com/iwuFewUx

pageable: {
    numeric: false,
    previousNext: false,
    messages: {
    display: "{0} - {1} of {2:#,##} items"
}

Here is yet another dojo sample https://dojo.telerik.com/eYELUheC/9.

You can find more information at

• https://docs.telerik.com/kendo-ui/globalization/intl/numberformatting
• https://docs.telerik.com/kendo-ui/api/javascript/ui/pager/configuration/messages#messagesdisplay.
  

Regards,
Rumen
Progress Telerik