Text messages displayed in pager are not working

[Bhairav]

I work on an enterprise application that has a mix of AngularJS (v1) and NGX (v2+) pages. We employ Kendo UI to construct Grids for list pages in the app.

Recently, we updated the the NGX portion of our application to Angular 12 via these update steps.

 

After doing so however, the "items per page" text that usually appears at the bottom of the grid next to the page size drop down disappeared from grids that are on AngularJS pages.

 

I've tried consulting these docs to see how to manually change the pager's messages. For example

<div class="ir-list">
	<div kendo-grid="grid" options="gridOptions"></div>
</div>

and

$scope.gridOptions = {
   .
   .
   .
   pageable: {
      messages: {
         itemsPerPage: "items per page"
      }
   }
};

 

should enable the message, but this does not work. Interestingly, other messages such as "empty" and "display" seem to work fine. It's "itemsPerPage" (among others) that seemingly does not. Any reason why this may be happening?

Thanks!

 

[Georgi Denchev]

Hello, Bhairav,

It is a bit difficult to determine what the cause of the issue may be based on the provided details. Is the pageSizes dropdownlist visible or is it missing as well? What does the DOM tree look like when you inspect the dropdownlist element?

Are you using a culture different from the default one(en-US)?

Would it be possible for you to provide a small project where the issue can be observed? I should be able to find the problem if I can debug it locally.

Best Regards,

Georgi

[Bhairav]

Hi Georgi,

Here is the DOM tree for the grid:

<div class="k-pager-wrap k-grid-pager k-widget k-floatwrap" data-role="pager">
  <a href="#" aria-label="Go to the first page" title="Go to the first page" class="k-link k-pager-nav k-pager-first k-state-disabled" data-page="1" tabindex="-1">
    <span class="k-icon k-i-arrow-end-left"></span>
  </a>
  <a href="#" aria-label="Go to the previous page" title="Go to the previous page" class="k-link k-pager-nav k-state-disabled" data-page="1" tabindex="-1">
    <span class="k-icon k-i-arrow-60-left"></span>
  </a>
  <div class="k-pager-numbers-wrap">
    <ul class="k-pager-numbers k-reset">
      <li class="k-current-page">
        <span class="k-link k-pager-nav">1</span>
      </li>
      <li>
        <span class="k-state-selected">1</span>
      </li>
    </ul>
  </div>
  <a href="#" aria-label="Go to the next page" title="Go to the next page" class="k-link k-pager-nav k-state-disabled" data-page="1" tabindex="-1">
    <span class="k-icon k-i-arrow-60-right"></span>
  </a>
  <a href="#" aria-label="Go to the last page" title="Go to the last page" class="k-link k-pager-nav k-pager-last k-state-disabled" data-page="1" tabindex="-1">
    <span class="k-icon k-i-arrow-end-right"></span>
  </a>
  <span class="k-pager-sizes k-label">
    <span title="" class="k-widget k-dropdown" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="f799b4c5-6a1f-401c-b428-523ad5a6dd81_listbox" aria-live="polite" aria-disabled="false" aria-busy="false" aria-activedescendant="ab0503cf-cd7e-4806-8420-81d063a6bfe8" style="">
      <span unselectable="on" class="k-dropdown-wrap k-state-default">
        <span unselectable="on" class="k-input">20</span>
        <span unselectable="on" class="k-select" aria-label="select">
          <span class="k-icon k-i-arrow-60-down"></span>
        </span>
      </span>
      <select data-role="dropdownlist" aria-label="20" style="display: none;">
        <option value="10">10</option>
        <option value="20" selected="selected">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </span>
  </span>
  <a href="#" class="k-pager-refresh k-link" title="Refresh" aria-label="Refresh">
    <span class="k-icon k-i-reload"></span>
  </a>
  <span class="k-pager-info k-label">1 - 2 of 2 items</span>
</div>

As you can see, the pageSizes dropdownlist is there as well as the navigation buttons and info label that says how many items or on the page. It's just the "items per page" text that is missing; ideally, it would appear after the dropdownlist span element.

I checked the culture as well; it is en-US.

Unfortunately, due to the size of my application (stylesheets, JS files, etc.), I can't really provide a stackblitz link. Though I think this may have to do with the version of the Kendo grid that I'm running.

[Georgi Denchev]

Hi, Bhairav,

Unfortunately, it is hard to debug the actual cause of the issue without the application itself as I am unable to reproduce it locally. I'll do my best to find the reason behind this behavior, however I cannot promise anything.

What I can offer at this time is a simple workaround to add the text manually:

$("#grid").data("kendoGrid").pager.element.find(".k-pager-sizes").append("items per page");

You can execute the above snippet once the Grid loads.

Best Regards,

Georgi