Changing the text of the paging area in the grid

[Charles]

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".

[Iliana Dyankova]

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

[Abhinay]

Is it possible to set this message dynamically ?? For eg. i want show selected rows count

[Tsvetomir]

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

[Abhinay]

Thanks Tsvetomir, appreciate  your response ...

 

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

This is working fine though ....

[Tsvetomir]

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

[Abhinay]

Thanks Tsvetomir.

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

[Chamal]

Is it possible to add this one to angular 8?

[Tsvetomir]

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