I'm migrating KendoUI for jQuery to React. In jQuery version of Kendo Grid was possible to set "values" property to columns with "id" values.

In React version of the kendo grid, the "values" property for the GridColumn component is not available. How can I make the same like in jQuery version?

Thanks a lot for an each help.

Hi,

I am trying to implement in-grid date-range filtering using a custom filterCell in KendoReact Grid.

Context:
I followed the Knowledge Base article:
React Create a Date-Range Filter in the Grid - KendoReact

I adapted the example to my project and used a custom filterCell for date-range filtering.
However, I noticed an issue:

When two or more columns with the same custom date filter cell are adjacent, the filter UI of the neighboring columns is rendered inside the first column's filter cell.

Example:
app.jsx - nodebox - CodeSandbox
When column order is: [text, text, date, date, text] - The filter UI of both date columns is rendered inside the first date column.
When I change the order to: [text, text, date, text, date] - The filters render correctly and independently.

Thank you.
Bohdan

Hi Team, 

We have a KendoReact Grid where (effectively) all rows are in edit mode (we set edit so each valid item is editable). One of the editable columns uses a custom edit cell that renders a NumericTextBox (quantity).

We also have a toolbar with an Input used to search/filter products. The toolbar Input onChange is debounced (lodash debounce), and on each debounced change we update the Grid filter/state.

Problem: when the debounced toolbar Input triggers a state update and the Grid re-processes data and re-renders rows, SOMETIMES one of the quantity NumericTextBox inputs auto-focuses. This steals focus from the search input while the user is still typing. The user then unknowingly continues typing, but now their keystrokes go into a quantity cell instead, causing incorrect quantities / incorrect lines ordered.

This is a serious UX/data integrity issue because users can accidentally edit quantities while they intend to keep typing the product search.

Expected Behaviour
When the user is typing in the toolbar search Input, focus should remain on that Input across Grid state changes (sorting/filtering/paging), and no cell editor should automatically take focus unless the user explicitly clicks into a cell or we explicitly programmatically focus it.

Source
I've tried to duplociate the error using a simplistic kendo example without luck but I've included the LineItemsGrid, LineItemsToolbar and the QuantityEditCell in this stackBlits for ref, see `MyFiles`. Note that this is NOT a working demo. There is just too much going on contextually to make a static working demo.

https://stackblitz.com/edit/react-2bkcpcjg?file=MyFiles%2FQuantityEditCell.tsx,MyFiles%2FLineItemsToolbar.tsx,MyFiles%2FLineItemsGrid.tsx
Any advise or way to tweak out where the bug could be would be helpful.

Thanks,
Grant

1. Scroll down a bit so that skip is != 0

2. Add a new item to the start of the list

3. Scroll up, the Grid becomes blank.

Repro: https://stackblitz.com/edit/react-jqcvjbpj

Hi, 

I am looking for a solution for locked custom column and I bumped into some example, but seems like it's already outdated and not working anymore at least due to missing 'cell' property in GridColumn component and missing tdProps in GridCellProps interface.

Is there any chance to bring the example up-to-date?
or are there any fresh articles/knowledge-base related to this problem?
example

related post here:
related forum post

Thanks,
Bohdan

We have a strange issue with the newest Grid component. I have this issue recreated here: https://codesandbox.io/p/devbox/proud-forest-v49cp6

The upper most input element is just to trigger state change. To see the issue:

1. Click on Edit in any row in the grid to start inline editing of that row
2. Start typing in the upper most input field (above the grid) 
3. After each letter the Grid will get focus preventing me from writing in the input!!!

Now if I enable editing in two rows at once (two rows are in edit state) this behavior is absent and I can normally type in my input above the grid. What is wrong?

Hi,

If Grid's last column has a long title, trying drag-n-drop to group that last column will get stuck. The mouse cursor's title box is too wide, it overflows to outside of the grid, then the cursor can't be moved anymore.

To reproduce, use this example - https://www.telerik.com/kendo-react-ui/components/grid/grouping, resize the browser to a smaller size so that "Category Name" column title fill up the entire column width. Then try to drag "Category Name" column.

Please see the attached screenshot too.

Thanks,

Jie

Hi Team,

I want to use the `GridToolbarColumnsChooser` in the Grid Toolbar (example) but there isnt any obvious way to customize the selectable visible/columns. In my use case, not all columns can be hidden, but there is no control in this component to do so.

I see there is a GridColumnMenuColumnsChoose, which accepts a single 'column' property, not sure if this is intentional, or maybe this is not what im looking for?

Anyway, any help to be able to customize the list of selectable columns would be helpful.

Thanks,
Grant

In KendoReact Grid, when using grouping with multiple hierarchy levels, the Grid automatically adds extra horizontal space inside the <td> elements (indentation for group levels).

Technically this makes sense, because each group level needs visual offset.
However, the problem is that there is no built-in way to control or configure this spacing.

As a result:

• extra empty space appears inside <td> cells

• the Grid content becomes wider than expected

• this breaks layout and design, especially in custom UI / strict design systems

Why doesn’t KendoReact Grid expose any API or configuration to control this indentation / spacing for grouped rows?

Is there:

• an official way to customize or limit this space?

• a recommended approach to override or manage this behavior without breaking Grid internals?

Any guidance or best practices would be appreciated.

Example: