Multi line Editable Grid Cell

Hi,

I am using 'Editor' to overcome the challenge in Grid but I am not able to filter or sort on the editor column of the Grid.

I am trying to come up with an editable, sortable and filterable Grid. The editable cells should accommodate multi line inputs. The row data should be updated in DB once 'onBlur' event triggers.

Could you please post an example? Thank you.

Hello, Sourav,

If I correctly understand the requirement is to edit one cell inside the Grid and by pressing enter to update the value on multiple lines?

If this is correct, it can be done with a custom cell that will have onKeyPress that will listen for Enter press and then update the values of all items with that field:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-cell

https://stackblitz.com/edit/react-qqrvgq?file=app/main.jsx (Edit the ProductName column, press Enter and notice how all rows are updated)

I hope this is helpful.

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thanks for your response. I got the concept of making an editable grid cell accept multiple lines. 

However, I am trying to build a grid with dropDownList and Input which can be sorted and filtered. I build a few ones from the examples but struggling to make the Input accept multiple characters at a time with state change.

Could you please help me by putting an example of such a grid where I would be able to transition states smoothly? I do not want to use the concept of clicking the 'Edit' button to edit the row. The Grid should be available for editing by default where I can select from DropDownList and input characters in the Input field. It should be sortable and filterable as well.

Thank you.

- Sourav

Hello, Sourav,

Could you please share more details about the issue with typing multiple characters into an input? There is one issue where if a custom cell is used as an inline function every time the user types the state is changed and the focus is lost. If this is the case, please use a reference to the function declared inside the component. An example is shown here:

https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-customization

If this is not the case, please share a short video of the issue, as this will help me better understand it.

As for the Grid being in edit all the time we can suggest checking our always in edit demo:

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-all-cell/

The in-cell editing is also a nice option as it will put the cell in edit on click:

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thanks for you response. I exactly faced the issue where the cell lost focus after putting one character.

I was using below codes for onChange of the text field -

 const handleEditChange = (e) =>
            {   
                props.onChange({
                    dataItem: props.dataItem,
                    field: props.field,
                    syntheticEvent: e.syntheticEvent,
                    value: e.target.value
              })
            }

Then I have the itemChange which is triggered by it as -

const itemChange = (e) => {
            e.dataItem[e.field] = e.value;
            setState({
                data: [ ...state.data ]
            });
        };

But it only changes a character and losses focus. The same piece of code worked for the dropDownList though.

Hi Stefan,

Thanks a lot for clarifying the issue related to Input cell editing.

The issue is resolved in this example https://stackblitz.com/edit/react-ssjjj5?file=app%2Fmain.jsx. I have added a dropDown to the to make sure it works as well. 

However, I am trying to convert this into functional component which is not yet successful. I hope the same concept should be working as a functional component.

- Sourav

Hi Stefan,

Interestingly the filtering does not work once the 'take:' value is changed to 0 when setting the state.

To overcome this, I have used a dynamic calculation of the length of data and assigned the value to 'take:' which resolve the issue -

    state = this.createDataState({
        take: this.props.data.length,
        skip: 0
    });

This was one of the blockers for me.

Hello, Sourav,

Thank you for your example.

I noticed a couple of things which I would like to address.

1) When the Grid will have custom editors, we recommend on their change event to call the onChange handle that comes with the props. This will ensure that the value update will come from the Grid. This will also remove the need to pass extra functions to the custom cell.

    const handleChange = (e) => {
        props.onChange({
            dataItem: props.dataItem,
            field: props.field,
            syntheticEvent: e.syntheticEvent,
            value: e.value
        });
    }
    return (
      <td>
        <Input onChange={handleChange} value={value} />

2) The take parameter is the same as the pageSize when the Grid is pageable, it tells the Grid how many records to show. If we set it to 0, it will show no records. If the Grid will not be pageable, please remove this parameter:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-take

I converted the example to use functional components, editing, sorting, and filtering. All seems to be working as expected:

https://stackblitz.com/edit/react-ssjjj5-7adexo?file=app%2Fmain.jsx

I hope this is helpful.

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thanks a lot for your examples. It works perfectly now.

Regards,

Sourav

Hi Stefan,

Though the solution is working fine, the typing in the TextField is slow as we are updating each character back to the data every time we type.

Could you please let me know if we have any workaround for this issue which would help to improve typing speed? I tried to manage the TextField with local state which made typing faster. Then I updated the data onBlur event. But that approach broke the filtering functionality.

Please advise.

- Sourav

Hello, Sourav,

In order to see if the delay is expected please share the number of records in the Grid (or a single page if paging is used) and if this is tested with production built? React is usually times faster in production, which means that it may have no visible delay when testing with the production built.

Also, keeping an internal state is a valid approach and we have users that utilize it. Could you please share the issue that occurs during filtering?

Sharing an example or al least a short video will help us better understand the setup.

Regards,
Stefan
Progress Telerik

Hi Stefan,

I tested it with production build and the typing is still slow.

I have created an example where I managed the state within the Input component. I am updating the master data using 'onBlur' event. You could see the filtering and sorting is not working for the 'ProductName' column. We are having the exact same issue.

https://stackblitz.com/edit/react-ssjjj5-js3m86?file=app%2Fmain.jsx

Please let me know if I need to change anything on the code to make it work. I do not want to update each character at a time. Updating the master data using 'onBlur' should be the approach.

Thank you!

- Sourav

Hello, Sourav,

Thank you for your example.

Indeed, this is expected in this setup as when using the state React memorizes the component state. This means that when we sort React knows that for cell 1, the state is 'foo', and even if a new value is passed to the cell the React state is not updated and 'foo' we will render.

This is handled by using the useEffect hook (or componentDidUpdate for class components) to update the state when the data item is changed:

    useEffect(() => {
      setInputValue(props.dataItem[props.field])
    },[props.dataItem]);

After updating the example the sorting and filtering are working as expected on my end.

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thanks a lot. The addition of useEffect() hook resolved the issue.

- Sourav