Hi. I'm implementing a Grid with grouping and virtual scrolling. It i see it have some defects when I do scrolling. I created an example to demonstrate that and recorded a small video. Please take a look and tell me if I do anything wrong.

https://stackblitz.com/edit/react-tvh32r?file=app/main.jsx
https://take.ms/r6Cia

Thanks

Hi all

I am trying to select all contents of the NumericTextBox when the control gets focus.

I have tried this in the regular way with an onfocus event and in the event event.target.select()

But this does not seem to actually highlight and select the contents. I have googled around and others seem to have this issue but the only examples I can find are for the jquery tools.

Kendo UI React Wrapper Spreadsheet has the following warning and will stop working with React 17 (which is out now, and I'm planning to upgrade to once a couple other dependencies update to it as well).

react_devtools_backend.js:2430 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Can this be updated or a native React spreadsheet be implemented?

Hi,

we can have a lot of messages and attachments in our chat history. Is there a virtual scroll option or do you have any advice how to do this without loading every message at the beginning but enable access to the whole chat history? 

Hi,

Could you please provide an example of how to dynamically set the major units of the value axis of a bar chart? I have tried using the onRender method but this ignores changes to options and blows up if you trigger a chart redraw.

If it helps, what I am trying to achieve is to stop the major units from having decimal places i.e. I would like to set a minimum major unit for the value axis. The data I am showing can only ever be whole numbers but if the chart has small or no values then the axis major units and max have decimal places as per the attached screenshot.

Hello, I have a grid that I'm trying to make it accesible,  however, for the columnMenu (GridColumn prop) it seems that is not possible, I couldn't find a way to open it, when I press enter in the keyboard it's sorting the table, but apparently there is not way to activate the menu with the keyboard. I'm attaching some images for reference. Also, when I open the menu (clicking in the button) the buttons inside GridColumnMenuSort (sort ascending and sort descending) component are not accesible, it's going directly to the filter options inside GridColumnMenuFilter component when I press Tab. I'm not sure if I'm doing something wrong or if this is a bug, could you help me please?

Hi, 

We are trying to make grid with dynamic data where number of column will not be constant and it may be vary and columns name too. Could you please let us know how to implement this type scenario. 

And also please let me know how can we add a dropdown which will show the data types of that column in dynamic columnheader. ? 

Hi there,

  I know that this is a big topic, but I will ask/comment anyway. Others might benefit as well.

  The selection logic that kendogrid uses is not performant enough.

  On every selection basically everything is re-rendered:

  - All rows.  (GridRow)

  - All cells for all rows. (GridCell)

 - The header 

- The toolbar

  This works well enough when there are a few records - 10-20-50.

  With more records the performance degrades too much. 

  To improve performance:

   -  I used React.memo for the cells

However, the rows (GridRow),header,toolbar are still re-rendered. When I have 100-200 and more records that's too much.

  You provide virtual scrolling, but it has the following disadvantages:

  1. You have to have a fixed row height. For my application this is too restrictive. I need to have variable row height.

  2. You cannot use paging with virtual scrolling. (I might be able to hack a custom paging solution or do not use paging. But even then the fixed row height is too restrictive)

I am going in the direction of using something like react-visible, to detect which rows are off-canvas and avoid rendering them.

Do you have any other suggestions?

Do you plan on optimizing the grid performance? I can wait a few months for a better solution coming from you.

How can I override the GridRow component for the grid? There is a hook rowRender (or renderRow, don't remember). I tried returning a ReactNode from it, but it didn't work (the app crashes)? Can you please provide an example how can I do that?