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

I am getting the following WARNINGS

$_default-colors: $kendo-colors

from

node_modules/@progress/kendo-theme-bootstrap/scss/core/_index.scss 23:5 @forward

$_default-elevation: $kendo-elevation,

$_default-font-sizes: $kendo-font-sizes,

I am giving only some examples. Is there a way to fix these warnings.

Please help

Thank you