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 Kendo Grid next to the page size drop down disappeared from grids that are on AngularJS pages.
I've tried reverting the i18n migration step in the Angular upgrade guide which changes message IDs ("items per page" is one of the messages in messages.xlf) but this didn't help.
I also tried modifying the $scope's gridOptions that set the messages on the grid based on these docs i.e.
pageable: {
.
.
.
messages: {
itemsPerPage: "items per page"
}
}
but this also didn't work.
What's interesting is that if I modify the display or empty properties in messages, I do actually end up seeing a change. It's itemsPerPage (among other properties) whose updates can't be seen on the front-end. This might be a symptom of the same issue.
Anyone have ideas as to why this might be happening? Are there any incompatibility issues with certain versions of @progress/kendo-angular-<package_name> with version 12 of Angular?
1 Answer, 1 is accepted
Hi Bhairav,
The Kendo UI for Angular suite follows the Angular support policy and schedule and always tries to provide support from day 1 for the newest versions of the framework.
All Kendo UI for Angular packages are compatible with Angular v12 as well as v13. This can be seen in the ChangeLog section of each package, for example:
https://www.telerik.com/kendo-angular-ui/components/grid/changelog/
Regarding the 'item per page' information, by default is hidden. For more information about the available pager settings please check this article:
https://www.telerik.com/kendo-angular-ui/components/grid/paging/#toc-pager-settings
To customize the message, the developer can use the CustomMessagesComponent and set the pagerItemsPerPage option, like:
<kendo-grid>
...
<kendo-grid-column field="UnitsInStock" title="Units in stock"> </kendo-grid-column>
<kendo-grid-messages pagerItemsPerPage="items per pagina"></kendo-grid-messages>
</kendo-grid>Here is an example:
https://stackblitz.com/edit/angular-yjr5aj
In case I didn't understand the requirement properly please do let me know.
If Kendo Grid for Angular JS is used, please consider opening a new thread in the Kendo UI for jQuery forum.
Regards,
Martin
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi Martin,
That was not quite what I was looking for. I am trying to understand why the "items per page" message is not showing up on an AngularJS Kendo Grid. I've consulted these docs to try and debug this. For example,
<div class="ir-list">
<div kendo-grid="grid" options="gridOptions"></div>
</div>and
$scope.gridOptions = {
.
.
.
pageable: {
messages: {
itemsPerPage: "items per page"
}
}
};but this doesn't seem to work.
I realize that this is the wrong forum for this type of question, so I will ask it in the Kendo UI for jQuery forum.
Thanks!
Hi, Bhairav,
Let us continue the discussion in the other forum thread. In case we find the the cause of the issue and a possible solution, the answer will be posted there.
Best Regards,
Georgi