Inline Editing on Row Click in Kendo React Grid

[Mansi]

Hi,

I have included onRowClick atrribute in kendo react grid to enable editing in the row when it is clicked. Is there an event to detect  a click outside the grid, so that I can disable editing in the row whenever the user clicks outside that Kendo react Grid.

Regards,

Mansi 

[Filip]

Hi, Mansi,

It is possible to disable row editing by attaching an onBlur function on the RowRender that exits editing mode. We have prepared a runnable example that shows this approach here:

https://stackblitz.com/edit/react-5vymyv-pmittz?file=app/main.jsx

We may also add logic to automatically focus the first editor as in order to fire the onBlur some elements should be focused. This logic can be seen in this demo inside the cell reader:

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/

The demo is for in-cell editing, but a similar logic can be used for in-line editing as well.

I hope this helps.

Regards,
Filip Progress Telerik

[Mansi]

Hi Filip,

Could you provide logic for in-line editing as well. Not able to figure out a few things.

Regards,

Mansi

[Filip]

Hello, Mansi,

We are currently creating a working example with inline editing that will be delivered to you in a couple of days.

Once we have set the example we will provide it as soon as possible. 

Thank you for your patience.

Regards, Filip Progress Telerik

[Filip]

Hi, Mansi,

We finished the example with inline-editing, which can be found here:

https://stackblitz.com/edit/react-eaebtq?file=app/main.jsx

where what we have mostly done is to focus the element in the cellRender and then call the exitEdit function onBlur inside of the rowRender in order to disable the editing of the cell.

I hope this helps.

[Mansi]

Thank you so much!

This helped a lot