Telerik Forums
KendoReact Forum
1 answer
100 views

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!

Konstantin Dikov
Telerik team
 answered on 06 Oct 2023
1 answer
63 views

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

pageable={{
              buttonCount: 5,
              info: true,
              pageSizes: [10, 20, 40],

            }}

Vessy
Telerik team
 answered on 05 Oct 2023
1 answer
110 views

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

Filip
Telerik team
 answered on 05 Oct 2023
1 answer
135 views

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

Konstantin Dikov
Telerik team
 answered on 04 Oct 2023
3 answers
163 views

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:

<button onClick={onClick} className={`k-icon k-icon-lg ${sortType ? 'k-i-sort-asc-sm': 'k-i-sort-desc-sm'}`}/>

 

localhost Grid component with sorting icon -

 

https grid component:

 

 

Vessy
Telerik team
 answered on 04 Oct 2023
1 answer
490 views

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;
	}
});


Wissam
Telerik team
 answered on 04 Oct 2023
1 answer
131 views
Currently using the Column Menu Checkbox Filter in several places in our grid. It innately works great, but our client wants us to remove the additional step of selecting the "Filter" button to apply the filter from the column menu, and instead wants the columns to filter on selection of the checkboxes in the column menu filter itself. I have noticed that most things on this component aren't exposed, and even the example in the documentation of adding a custom UI, the UI provided to the component does not contain the Filter and clear button, but they still appear - as a footer perhaps? - any way of accomplishing this would be greatly appreciated, thanks for your time!
Wissam
Telerik team
 answered on 04 Oct 2023
1 answer
82 views

I noticed that kendo-data-query was updated to version 1.7.0, but there is nothing listed here: https://www.telerik.com/kendo-react-ui/components/changelogs/data-query/

Also, I've noticed lag between when a new version is released and release notes are set: https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/ In this case, 5.19.0 is available but there are no notes detailing what was added/fixed.

How long should we expect to wait for release notes to be available? We like to keep our libraries up-to-date, but would like to know what has changed.

Thanks!

Wissam
Telerik team
 answered on 02 Oct 2023
1 answer
66 views

Hi there,

Is the demo here loading for you? https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-hide-grouped-columns/

  • When I click "Open in StackBlitz" or "Open in CodeSandbox", none of the dependencies are added and files that are required for importing are missing.
  • The embedded demo itself on the Kendo site is not working/loads forever.

 

Thank you in advance for your help!

Janki

Filip
Telerik team
 answered on 02 Oct 2023
1 answer
132 views

I have some content that consists of an image with a hidden link. (It used to be a button, but I found that the button was being stripped out entirely. If there's a way to fix this, I will probably go back to the button.)

<div class="divbutton">
<p>
<img src="data:image/jpeg;base64,foo" alt="Xsctn_Strat-Struct.jpeg" title="Xsctn_Strat-Struct.jpeg" style="width: 100px" class="Figure-Preview" id="64319096-9a51-418d-a11b-e70d25d9cb0e" contenteditable="false" draggable="true">
<a contenteditable="false" onclick="parent.image_preview(document.getElementById('64319096-9a51-418d-a11b-e70d25d9cb0e').src)">EXPAND</a>
</p>
</div>

When I inspect the <a> element, it's missing its onclick (and contenteditable attribute, although that is not critical.)

If I manually recreate the onclick event in the DevTools, it works perfectly.

How can I stop it from being removed?

Konstantin Dikov
Telerik team
 answered on 29 Sep 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?