This is a migrated thread and some comments may be shown as answers.
Changing the text of the paging area in the grid
8 Answers 157 Views
This is a migrated thread and some comments may be shown as answers.
Charles
Top achievements
Rank 1
Charles asked on 22 Jan 2013, 02:56 PM
Is it possible to change the text of the paging area in the grid?  Specifically, I'm talking about the "1-10 of 50 items".  We need to change it to something like "1-10 of 50 books".

8 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 23 Jan 2013, 12:56 PM
Hi Charles,

You can achieve the desired outcome using the pageable.messages object. I.e.
$("#grid").kendoGrid({
  //....
  pageable: {
     messages: {
        display: "{0}-{1}of{2} books"
     }
  }
});

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Abhinay
Top achievements
Rank 1
answered on 17 Sep 2019, 10:37 AM
Is it possible to set this message dynamically ?? For eg. i want show selected rows count
0
Tsvetomir
Telerik team
answered on 19 Sep 2019, 06:23 AM

Hi Abhinay,

Generally, the text of the pager could be changed dynamically via using the setOptions() method. However, this would cause the grid to reinitialize which would be unnecessary for changing only one span HTML element's content. 

What I can recommend is to access the element with jQuery and alternate the text:

$("span.k-pager-info").text("custom text");

And this could be executed in the change event of the grid. With the help of the select() method, you would retrieve all of the selected rows.

Let me know in case additional assistance is required.

 

Kind regards,
Tsvetomir
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
Abhinay
Top achievements
Rank 1
answered on 19 Sep 2019, 01:49 PM

Thanks Tsvetomir, appreciate  your response ...

 

Took similar approach. Was wondering if there is any better approach :)

This is working fine though ....

0
Tsvetomir
Telerik team
answered on 20 Sep 2019, 02:59 PM

Hi Abhinay,

An alternative to the HTML element's content would be to alternate the messages via the pager's configuration. Namely, subscribe to the change event of the grid and update the text:

         change:function(e){
            var count = e.sender.select().length;
            e.sender.pager.options.messages.display = count + " selected rows";
            e.sender.pager.refresh();
          },

Here is the corresponding Dojo sample:

https://dojo.telerik.com/aqEZiraK

Give this a test and let me know on your feedback.

 

Best regards,
Tsvetomir
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
Abhinay
Top achievements
Rank 1
answered on 24 Sep 2019, 04:46 AM

Thanks Tsvetomir.

This works and looks much better solution than modifying the dom element text via JQuery

0
Chamal
Top achievements
Rank 1
answered on 27 Sep 2020, 05:39 PM
Is it possible to add this one to angular 8?
0
Tsvetomir
Telerik team
answered on 29 Sep 2020, 04:37 PM

Hi Aruna,

If the Kendo UI Grid for jQuery is used in an Angular 8 environment, the same exact approach can be implemented. This is due to the fact that the solution that I have provided uses purely JavaScript (jQuery actually) and can be executed in any environment that supports JavaScript.

Let me know if further questions arise.

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Charles
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Abhinay
Top achievements
Rank 1
Tsvetomir
Telerik team
Chamal
Top achievements
Rank 1
Share this question
or