Changing the text of the paging area in the grid

9 posts, 0 answers
  1. Charles
    Charles avatar
    9 posts
    Member since:
    Mar 2012

    Posted 22 Jan 2013 Link to this post

    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".
  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 23 Jan 2013 Link to this post

    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!
  5. Abhinay
    Abhinay avatar
    3 posts
    Member since:
    Sep 2015

    Posted 17 Sep 2019 in reply to Iliana Nikolova Link to this post

    Is it possible to set this message dynamically ?? For eg. i want show selected rows count
  7. Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 19 Sep 2019 Link to this post

    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.
  8.
  9. Abhinay
    Abhinay avatar
    3 posts
    Member since:
    Sep 2015

    Posted 19 Sep 2019 in reply to Tsvetomir Link to this post

    Thanks Tsvetomir, appreciate  your response ...

     

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

    This is working fine though ....

  11. Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 20 Sep 2019 Link to this post

    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.
  13. Abhinay
    Abhinay avatar
    3 posts
    Member since:
    Sep 2015

    Posted 23 Sep 2019 in reply to Tsvetomir Link to this post

    Thanks Tsvetomir.

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

  14.
  15. Aruna
    Aruna avatar
    4 posts
    Member since:
    Sep 2020

    Posted 27 Sep 2020 in reply to Iliana Nikolova Link to this post

    Is it possible to add this one to angular 8?
  17. Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 29 Sep 2020 Link to this post

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

Back to Top