In-cell grid editing with Upload component

[Sanja Tolo]

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

[Stefan]

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

[Sanja Tolo]

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