My data fits into a single page, and I don't want to show any of the paging controls other than the info. However I can't seem to remove the dropdown
See https://stackblitz.com/edit/react-fv221r?file=app%2Fmain.tsx for a repro
Hi guys,
I'm trying to style a <Pager pageSizes> dropdown popup.
Is there any way to add a className to it? Or the only workaround is to create a complete custom Pager to do so?
Thanks!
I want to customize the Pager, but from what I can see I will have to build the whole pager. I only wan to update the Pager info from "1 - 50 of 55 items" to just "55 items".
Is that posslbe?
Issues reported in GitHub too. Grid is failing accessibility. · Issue #1575 · telerik/kendo-react (github.com)
During accessibility testing, there are 5 violations. The violations are:
And when add footerCell
to only some of the columns, elements in .k-grid-footer
have several violations
aria-allowed-attr
in footer cell which column has no footerCell
property.
.k-table-td[aria-colindex="1"][role="columnfooter"]
<td class="k-table-td" role="columnfooter" aria-selected="false" aria-colindex="1"></td>
aria-allowed-role
in colgroup in footer.
.k-grid-footer-table > colgroup
<colgroup role="presentation">
aria-roles
in footer cell which column has no footerCell
property.
.k-table-td[aria-colindex="1"][role="columnfooter"]
<td class="k-table-td" role="columnfooter" aria-selected="false" aria-colindex="1"></td>
In pagination, the pageSize selector also have a violation.
aria-input-field-name
: I guess it's because the span element have an input type role, but didn't meet the needs of an input..k-pager-sizes > .k-dropdownlist.k-picker-solid[role="combobox"]
<span class="k-dropdownlist k-picker k-picker-md k-rounded-md k-picker-solid" tabindex="0" role="combobox" aria-required="false" aria-haspopup="listbox" aria-expanded="false" aria-owns="d22e899f-3cc6-49c4-a4d2-d6153e17a2f6" aria-describedby="ea34d15b-a71a-48fa-a95d-d773f6fcb50a">
Package version: "@progress/kendo-react-grid": "^5.11.0"
. By the way, I checked the changelog and there is no related update.
Thanks for your help.
Hi,
I have a requirement to pass some custom data to custom pager which I will be using within my custom pager component. I did not find a way to do so. For e.g. in my case I want to pass the number of filtered rows that I get from backend and show that in the custom pager component. Could you please let me know?
Thanks for your help!
Janaki
Hi,
I am trying to implement a custom pager which I am able to implement on the lines of your given in your documentation https://www.telerik.com/kendo-react-ui/components/grid/paging/. Please refer to Custom Pager section.
However when I make the grid sortable, the sort icons (up and down arrows) do not appear in the column header. Please look at the link https://stackblitz.com/edit/react-7fthgv-hcysax?file=app%2Fmain.tsx which demonstrates the problem. I have set the property sortable to true here both for the Grid and the GridColumn.
I am not sure why the sort icons are not appearing.
I am using kendo data grid version 5.9.0. If you need any other info please let me know. Any help would be appreciated.
Thanks
Janaki
Hello.
Is it possible to extend the pager (for grid)? With existing components for page number, page size, page info? I know of this example: https://www.telerik.com/kendo-react-ui-develop/components/grid/paging/#toc-custom-pager. But I just need to add one, two extra icons - before the info. Or change info text. We don't want to make our own components for page numbers and page size. I wanted to use the PagerNumericButtons and PagerPageSizes components, but it didn't work.
Well thank you.
Hi, I have a problem handling all the mention in the title you can take a look at this stackblitz that I modify from the selection docs
https://stackblitz.com/edit/react-wacgk5?file=app%2Fmain.jsx
the problems are:
1. when filtering the product name field and then removing the filter the total items of the grid became only 10 ( should be 77 ).
2. when changing the page the total items also became 10 and only 1 page remained to select.
what I'm doing wrong or there is a better way to handle this?
Hi, I am trying to figure if it is possible to change the style of the paging buttons.
I using the Boostrap theme and it looks like that :
and I want to make it like this:
it is possible? which changes do I need to do on CSS?