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

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:

• aria-required-children in Grid itself.
  

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.

  • Path: .k-table-td[aria-colindex="1"][role="columnfooter"]
  • Snippet: <td class="k-table-td" role="columnfooter" aria-selected="false" aria-colindex="1"></td>
  • How to fix: ARIA attribute is not allowed: aria-selected="false"

• aria-allowed-role in colgroup in footer.

  • Path: .k-grid-footer-table > colgroup
  • Snippet: <colgroup role="presentation">
  • How to fix: ARIA role presentation is not allowed for given element

• aria-roles in footer cell which column has no footerCell property.

  • Path: .k-table-td[aria-colindex="1"][role="columnfooter"]
  • Snippet: <td class="k-table-td" role="columnfooter" aria-selected="false" aria-colindex="1"></td>
  • How to fix: Role must be one of the valid ARIA roles: columnfooter

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.
  • Path: .k-pager-sizes > .k-dropdownlist.k-picker-solid[role="combobox"]
  • Snippet: <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">
  • How to fix:
    • aria-label attribute does not exist or is empty
    • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
    • Element has no title attribute

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?

Hi,

I am using kendo react grid using sample available here.

https://www.telerik.com/kendo-react-ui/components/grid/selection/  "Section" : Customizing the Selection, where using checkbox to read all the selected rows.

Using the above sample , i have created grid with checkbox only on rows NOT on header checkbox as single selectable row. since my grid data will be changed frequently by adding or removing rows, i am maintaining data in react hooks useState and update this state will reflect in grid. all works as expected, but, i have below issue.

I am writing onSelectionChange event where i wanted to check/uncheck based on user selection and update my state based on this selection, when i try to update state object by reading all rows in grid using event.dataitems, i get rows only on specific page where pagination is enabled.

For ex, i have two pages with 10 in each, if i am in 2nd page and read all dataitems, i get only 10 rows in 2nd page. so i wanted to know how to read all the rows in grid irrespective of pagination. is there way to get it?  the reason i'm asking is useState is not updating state immediately and i am getting previous state data and i am loosing the changes made by other events(delete/add).

here is the  onSelectionChange event.