This is a migrated thread and some comments may be shown as answers.

In-cell grid editing with Upload component

2 Answers 145 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Sanja Tolo
Top achievements
Rank 1
Iron
Iron
Sanja Tolo asked on 11 Nov 2020, 09:55 PM
Hello,

we are trying to implement in-cell editing in grid following your example as shown here, but we are using functional components instead of classes. One of our requirements is making a column for files, i.e. making a cell that will display the file's name when in view mode and display your Upload component when in edit mode. We are having a a few problems in making that custom cell.

Our first problem is that there seems to be no way to exit edit mode for that file field when clicking away (except when clicking on another cell) because focus and blur events are not firing. The second problem is that after clicking on "Select files..." in the Upload and choosing a file, nothing happens (Upload's onAdd event is not firing). Choosing a file using drag and drop functionality works.

Do you maybe have an example or a proposed solution for this scenario?

Thank you and kind regards,
Sanja

2 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 12 Nov 2020, 07:54 AM

Hello, Sanja,

I was able to locate why both issues occur:

1) Blur not fired - This is because the blur is fired after an element has lost focus. We have a logic to automatically focus an input in the demo, but as the Upload is a custom cell, we have to add logic to focus it as well in order to fire the onBlur and close the cell for edit:

        const myTD = React.createRef()
        React.useEffect(()=> {
          if(myTD.current !== null && myTD.current.querySelector('.k-button') !== null ){
              myTD.current.querySelector('.k-button').focus() // focus the button in order to fire blur
          }
          
        },[props.dataItem.inEdit])
        return (
            <td onClick={(e) => props.enterEdit(props.dataItem, props.field)} ref={myTD}>

https://stackblitz.com/edit/react-naehrr?file=app%2Frenderers.jsx

2) The onAdd not fired - This occurs as this time we have clicked the button, focused it, but after the file dialog is shown, this calls the onBlur, closes the cell, removes the Upload and there is not Upload component left on the page to fire the onAdd. We can prevent the close if the button is blurred, but this will also prevent the cell from closing on blur in general.

In this case, we can recommend using the in-line editing or removing the onBlur logic for exit editing, as opening a file explorer causes blur and we have no control over that.

Regards,
Stefan
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/.

0
Sanja Tolo
Top achievements
Rank 1
Iron
Iron
answered on 13 Nov 2020, 10:07 AM
Hello Stefan,

we decided to prevent onBlur logic for exiting edit mode for this column.

Thank you for the quick response and for your help!

Kind regards,
Sanja
Tags
General Discussions
Asked by
Sanja Tolo
Top achievements
Rank 1
Iron
Iron
Answers by
Stefan
Telerik team
Sanja Tolo
Top achievements
Rank 1
Iron
Iron
Share this question
or