How do I create a multiline text editor in KendoReact Grid?

[Ryan]

I am allowing users to edit in my KendoReact grid. By default the editor renders <input type=text elements. Is it possible to change that so it would render a <textarea element instead?

I see there are a few solutions with non-KendoReact: https://www.telerik.com/forums/how-to-change-input-to-textarea-in-popup-editor

I can't figure out how to make this work with KendoReact, other than creating a custom editor, which seems like a pain for a request that must be pretty common.

[Ryan]

This is so useful! My table is using the "all cells are in edit mode at all times" where I was hoping to have text areas available. I don't know if that's possible too?

[Ryan]

I made this work. I don't know if this is "correct", but it certainly works for me. I added a TextAreaCell:

/**
 * This component is used to render a text area cell where users can edit multi-line text in the Telerik Kendo React grid.
 * @param props grid cell props
 * @constructor
 */
export function TextAreaCell(props) {
  const {dataItem} = props;
  return (
    <td {...props.tdProps}>
      <textarea name={props.field}
                value={dataItem[props.field]}
                onChange={(event: any) => {
                  event.field = props.field;
                  event.dataItem = dataItem;
                  event.value = event.target.value;
                  props.onChange(event);
                }}
                className={styles["textarea-column"]}
      />
    </td>
  );
}

Then in my Grid I use it like so:

<Grid data={myData}
      editField="inEdit"
      onItemChange={handleUpdate}
>
<GridColumn field="shouldSave" title="Save?" width="60px" editor="boolean" />
<GridColumn field="name" title="Name" width="150px" />
<GridColumn field="page" title="Page" width="50px" editable={false} />
<GridColumn field="description" title="Description" cell={TextAreaCell}/>
</Grid>

The "description" column is now a text area and my `handleUpdate` handler is called with the correct data item, etc.

[Hetali]

Hi Ryan,

Indeed, using the cell property of the GridColumnProps is the right way to define a custom component in the column. You can also use the KendoReact TextArea component in the column as seen in this StackBlitz example.

Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Ryan]

Thanks Hetali,

Unfortunately nothing is editable in that StackBlitz example. I had to change it to this to make it work:

export function TextAreaCell(props) {
  const {dataItem} = props;
  return (
    <td {...props.tdProps} className={styles["textarea-cell"]}>
      <TextArea name={props.field}
                value={dataItem[props.field]}
                onChange={(event: any) => {
                  event.field = props.field;
                  event.dataItem = dataItem;
                  props.onChange(event);
                }}
                className={styles["textarea-column"]}
      />
    </td>
  );
}

[Hetali]

Hi Ryan,

I'm glad you were able to modify the code and make the column editable.

I will proceed to close the ticket. In case you have more questions, simply reply in this thread to reopen the ticket.

Regards,
Hetali
Progress Telerik

[Hetali]

Hi Ryan,

Thank you for reaching out.

In order to change the input element to a textarea element in the KendoReact Grid Editor, modify the component of FieldProps to a textarea component. For example:

const TextAreaField = fieldRenderProps => {
  return <>
    <Label editorId={id} className={"k-form-label"}> {label} </Label>
    <div className={"k-form-field-wrap"}>
      <TextArea {...others} />
    </div>
  </>;
};

const EditForm = props => {
  return <Form>
    <FormElement>
      <FieldWrapper>
        <Field name={"ProductName"} component={TextAreaField} label={"Product Name"} />
      </FieldWrapper>
    </FormElement>
  </Dialog>} {...other} />;
};

Output:

TextArea with External Form

TextArea in Inline Editing

I have create two StackBlitz examples where I have modified the input with textarea in the KendoReact Grid Editor:

1. KendoReact Grid with External Form
2. KendoReact Grid with Inline Editing

Please give the above mentioned approach a try and let me know if it helps modify the input with textarea or if you have any further questions.

Regards,
Hetali
Progress Telerik