Telerik Forums
KendoReact Forum
1 answer
214 views
As I shown in the attached jpg file, I want to remove the first column which is showing the expand button (+) using Kendo React. As I'm a new to kendo react I have tried by setting this column width to zero but the css is not applying it. Then I have tried to apply width using the query selector but that was also not worked. I also tried by applying "display: none" to .k-hierarchy-cell, its working and hiding that first column but it is shrinking the next column to its size. Please guide me on this for expanded rows. 
Konstantin Dikov
Telerik team
 answered on 14 Aug 2023
1 answer
52 views

unstable selection of embedded tables. If I open row, it jumps to the table, but If I go back, I can't return to the table inside the cell.

demo: Vsj5kn (forked) - StackBlitz, You can open it in a new window and use the tab stop operation.

The order of my operations is: Tab, down arrow, down arrow, Enter, down arrow, down arrow, down arrow,  Shift+Tab, Tab

or Tab, down arrow, down arrow, Enter, down arrow, down arrow, down arrow,  Shift+Tab,  up arrow, up arrow,  down arrow, down arrow, Tab.

Only for the first time, can reach the position of the red circle through the tab stop, and go back, cannot enter it again.

 

 

Thanks a lot for an each help.

Regards,
Sunny Hu

 

Filip
Telerik team
 answered on 17 Jul 2023
1 answer
51 views

when jumping in the title of the table, selection goes under fixed columns and becomes invisible, it scrolls the table to the right after few more jumps.

The demo below is to simulate our business scenario

3oqybd (forked) - StackBlitz (code)

react-t4bmp9.stackblitz.io (Open the page verification tab stops)

As you can see in the picture above, the first and last columns are locked, because the grid's scroll bar is for the entire table instead of the unlocked column.
So when using the tab key to select the fourth and fifth columns, since the width of the Grid has not yet been exceeded, the scroll bar does not scroll, resulting in the selection of the fourth and fifth steps being invisible under the locked column

The scroll bar only scrolls when the tab key reaches the sixth step.

How could I solve this problem? please let me know if you have any questions?

Regards,
Sunny Hu

    


 

 

 

Wissam
Telerik team
 answered on 14 Jul 2023
1 answer
88 views

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

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.

Filip
Telerik team
 answered on 23 May 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?