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

In cell editing with text editor via hooks

5 Answers 179 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
Veteran
John asked on 08 Apr 2021, 07:01 PM

I ran into the same problem illustrated here: https://www.telerik.com/forums/inline-cell-edit-functional

 

However the solution is unusable with large lists (even with paging) due to the obvious iterations, the lag between character inputs is horrendous. This is not an issue with other inputs such as the number input editor, only the text editor. Has there been any discussion surrounding this, the input control should keep track of this independently instead of needing to cycle through the entire data list on every keystroke. 

 

Thanks

5 Answers, 1 is accepted

Sort by
0
Krissy
Telerik team
answered on 09 Apr 2021, 10:20 AM

Hi John,

We have introduced a new property of the Grid, dataItemKey
https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-dataitemkey 

Could you try using it, as it should improve the performance and remove the lag? 

Please let me know whether this solves the issue or if you need further assistance.

Regards,
Krissy
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.

0
John
Top achievements
Rank 1
Veteran
answered on 09 Apr 2021, 02:15 PM

Hi Krissy - I am using the dataItemKey, however this is in regards to in cell editing, as described in the referenced post. The text editor for in cell editing has some severe limitations (see original post).

https://www.telerik.com/forums/inline-cell-edit-functional

0
Krissy
Telerik team
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.

0
John
Top achievements
Rank 1
Veteran
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;
0
Accepted
Krissy
Telerik team
answered on 13 Apr 2021, 09:48 AM

Hi John,

Thank you for sharing your solution, it looks great.

The reason why the default cell text editor behaves like that is due to the fact that we do not know whether the developer would like their application to be statefull or stateless and we do not want to cause further complications.

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

Tags
General Discussions
Asked by
John
Top achievements
Rank 1
Veteran
Answers by
Krissy
Telerik team
John
Top achievements
Rank 1
Veteran
Share this question
or