Multi line Editable Grid Cell

15 posts, 0 answers
  1. Sourav
    Sourav avatar
    12 posts
    Member since:
    Jul 2020

    Posted 11 Aug 2020 Link to this post

    Hi,

     

    I am trying to create editable GridCell which could accommodate multiple lines by hitting [Enter] key.

    Could you please provide an example if this is possible?

    Thanks,

    Sourav

  2. Sourav
    Sourav avatar
    12 posts
    Member since:
    Jul 2020

    Posted 11 Aug 2020 in reply to Sourav Link to this post

    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.

  3. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 11 Aug 2020 Link to this post

    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

  4. Sourav
    Sourav avatar
    12 posts
    Member since:
    Jul 2020

    Posted 13 Aug 2020 in reply to Stefan Link to this post

    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

  5. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 14 Aug 2020 Link to this post

    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

  6. Sourav
    Sourav avatar
    12 posts
    Member since:
    Jul 2020

    Posted 14 Aug 2020 in reply to Stefan Link to this post

    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.

  7. Sourav
    Sourav avatar
    12 posts
    Member since:
    Jul 2020

    Posted 16 Aug 2020 Link to this post

    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

     

  8. Sourav
    Sourav avatar
    12 posts
    Member since:
    Jul 2020

    Posted 17 Aug 2020 Link to this post

    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.

  9. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 17 Aug 2020 Link to this post

    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

  10. Sourav
    Sourav avatar
    12 posts
    Member since:
    Jul 2020

    Posted 19 Aug 2020 in reply to Stefan Link to this post

    Hi Stefan,

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

    Regards,

    Sourav

  11. Sourav
    Sourav avatar
    12 posts
    Member since:
    Jul 2020

    Posted 25 Aug 2020 Link to this post

    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

     

     

  12. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 26 Aug 2020 Link to this post

    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

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

  13. Sourav
    Sourav avatar
    12 posts
    Member since:
    Jul 2020

    Posted 28 Aug 2020 in reply to Stefan Link to this post

    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

  14. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 31 Aug 2020 Link to this post

    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]);
    https://stackblitz.com/edit/react-ssjjj5-qkbeep?file=app%2Fmain.jsx

     

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

    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/.

  15. Sourav
    Sourav avatar
    12 posts
    Member since:
    Jul 2020

    Posted 01 Sep 2020 in reply to Stefan Link to this post

    Hi Stefan,

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

    - Sourav

Back to Top