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

Formatting numbers in grid pager

4 Answers 342 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rachael
Top achievements
Rank 1
Rachael asked on 17 Sep 2014, 01:43 PM
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

4 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 19 Sep 2014, 07:57 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Brian Edwards
Top achievements
Rank 1
answered on 19 Feb 2019, 09:56 PM
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?
0
khush
Top achievements
Rank 1
answered on 14 Apr 2020, 05:40 AM
Hi Rosen Facing Similar issue,need total page number displayed to be comma separated ,above fix is not working ..?
0
Rumen
Telerik team
answered on 15 Apr 2020, 01:57 PM

Hi Khush,

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

 

https://dojo.telerik.com/iwuFewUx



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

You can find more information at

Regards,
Rumen
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Rachael
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Brian Edwards
Top achievements
Rank 1
khush
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or