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

In cell editing with text editor via hooks

5 Answers 177 Views

General Discussions

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

5 Answers, 1 is accepted

answered on 12 Apr 2021, 08:21 AM

Hi John,

The solution provided in the link you sent us is a custom one. Item changes can be handled in a different way, the example we provided is just one of the ways this change can be handled. For example, instead of mapping through the whole list of items, you could use some other JavaScript method, like find or indexOf to find the matching element in the list that is being edited and update it with the value received from the input.

JavaScript find method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

JavaScript indexOf method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

The way the item changes are handled is up to the developer.
Hope these resources are helpful.

Regards,
Krissy
Progress Telerik

Тhe web is about to get a bit better!

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

answered on 12 Apr 2021, 02:48 PM

Thanks for the response, what I was more concerned with is the actual implementation of the default cell text editor, it seems like it should be handling its own edit state while in edit mode instead of requiring the calling code to update changes on every single keystroke. For anyone else who runs into this problem, this is what I used:

import React, { useEffect, useState } from "react";

import { Input } from "@progress/kendo-react-inputs";

const TextEditorCell = (props) => {

const { dataItem, field, onChange, colSpan, className, columnIndex, style, render } = props;

const [value, setValue] = useState("");

const [inEdit, setInEdit] = useState(false);

useEffect(() => {

const isInEdit = dataItem.inEdit === true || dataItem.inEdit === field;

setInEdit(isInEdit);

if (isInEdit === true && dataItem[field]) setValue(dataItem[field]);

}, [dataItem, field]);

const handleExit = (e) =>

onChange({

dataItem: dataItem,

field: field,

syntheticEvent: e.syntheticEvent,

value: e.target.value,

});

return render(

<td

colSpan={colSpan}

className={className}

role="gridcell"

aria-colindex={columnIndex + 1}

aria-selected={inEdit ? "true" : "false"}

style={style}

>

{inEdit ? <Input value={value} onChange={({ value }) => setValue(value)} onBlur={(e) => handleExit(e)} /> : value}

</td>,

props

);

};

export default TextEditorCell;

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

In cell editing with text editor via hooks

5 Answers, 1 is accepted