Hi Kendo,

    We're trying to utilize the KendoReact ListBox and noticed that the widget is not keyboard accessible (kendo demo). Arrow keys explicitly don't seem to do anything, so without a mouse you have no way to traverse and use the widget's available options.

     We expected it to behave like a traditional HTML listbox/select (dojo demo), which does fully support keyboard navigation and selection/deselection. Is there a way to implement this effectively?

Tested Chrome Version 117.0.5938.92 (Official Build) (64-bit)

I'd like to remove the clear filter button that is present in filterable columns by default and instead add a "Clear Filter" option to the filter operators. I'd like to make the clear filter functionality work as it did in a much older version of the library (and on a different platform).

Legacy "NoFilter" Option:

Current State (clear filter button):

I'd like to essentially "move" the clear filter button in the filter row into the filter options menu (in order to save the ~30px of horizontal space per column). In other words, for the sample column above, the options in the filter flyout menu would be:

• Clear Filter
• Contains
• Does not contain
• ...etc.

And clicking on Clear Filter would clear the filter and collapse the flyout.

I'd prefer not to build an entire custom filter menu to accomplish this. However, looking at the custom filter operator example (here), it isn't clear if injecting a custom Clear Filter operator would be the "correct" way to implement this.

Hello,

we have a use case where our actions column are hidden in grid because they are extra actions and there can be a lot of them, so we decided that we want to show them only when you hover over a row and show actions for that specific row. One of these actions is Menu where the parent is icon with vertical dots. When we hover over it shows menu items correctly, but when we hover one of the items the row loses hover and actions get hidden again even tho the popup is still open. 

The problem is because the popup opens in a portal outside of root, and it is separated from the grid altogether.

Here is simple reproducible issue demo with parent dissapearing when hover over menu items: Demo of the issue

Ideally we would like the row and actions to stay open in grid on that specific row and only close when we leave row and popup.
We tried implementing openPopupOnClick prop but it was worse user experience and still issue with hover after the first time.

Thank you for your help!

Hi,

I just wondered if there was any changes on displaying "info". I built the grid in React, and after updating the Kendo React to 5.18.0 version from 5.5.0, the "info" section seems to go missing (displaying # - # of # records). I did have this as part of the <Grid> properties. Thank you for the support

Greetings,

I'm currently using contentRender to display the items from the menu button. I have an issue where the long menu of items is causing the window to exceed the max height and create a scroll bar. 

Is it possible to display the menu with nested items and/or split the items into multiple columns with contentRender?

Please help, thanks!

Jason

Greetings,

I'm trying to implement the menu buttons that will only expand when it's clicked and it should remain open when the mouse pointer leaves the Menu. Currently, the user has to click the menu button or the items to close the menu. Is there a way to close the menu and disable the open-on-hover behavior by clicking outside of the menu button on the page?

Here is the snippet of the code:

<Menu
  openOnClick
  hoverCloseDelay={100000}
>

Please help, thanks!

Jason

Hi Team,

I am using Kendo React packages to develop my react application. There is a trouble is showing the sorting icon in the grid component in the https envrionment. I am using sorting icons with their classnames.

Packages: 

"@progress/kendo-react-grid": "^5.14.1",
"@progress/kendo-svg-icons": "^1.5.0",
"@progress/kendo-theme-default": "^6.4.0",
"@progress/kendo-react-common": "^5.17.0",

code:

localhost Grid component with sorting icon -

https grid component:

I have a simple kendo grid, where I set its selected field to true.

When I open the application in the browser, the 'aria-selected' is set to true. However, when I use jest the aria-selected of all cells is set to false.

Also when I do a fireEvent.click() on the rowElement*, it doesn't trigger the onSelectionChange of the Kendo Grid React component.

Is there anything special that I need to do to be able to correctly interact with the grid in my jest tests?

* the rowElement is found by

return await findByRole(this.gridElement, (content, element) => {
	if (element?.tagName === 'TR') {
		return (element as any).attributes['aria-rowindex'].value === (rowIndex + 1).toString();
	} else {
		return false;
	}
});