Inline Editing on Row Click in Kendo React Grid

1 Answer 784 Views
Miscellaneous
Mansi
Top achievements
Rank 1
Iron
Iron
Iron
Mansi asked on 26 Nov 2021, 09:29 AM | edited on 29 Nov 2021, 10:45 AM

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 

1 Answer, 1 is accepted

Sort by
0
Filip
Telerik team
answered on 01 Dec 2021, 09:16 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Mansi
Top achievements
Rank 1
Iron
Iron
Iron
commented on 01 Dec 2021, 10:14 AM

Hi Filip,

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

Regards,

Mansi

Filip
Telerik team
commented on 06 Dec 2021, 09:56 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Filip
Telerik team
commented on 09 Dec 2021, 05:34 AM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 14 Jan 2022, 09:36 AM

Thank you so much!

This helped a lot

Tags
Miscellaneous
Asked by
Mansi
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Filip
Telerik team
Share this question
or