Editing the Grid In-Cell with TextArea

Environment

Product

Progress® Kendo UI Grid

Description

How can I implement an in-cell editing in the Kendo UI for Angular Grid by using the TextArea element on enter?

Solution

Pressing the Enter key in the In-Cell editing mode of the Grid typically closes and saves the edited cell. You can customize this behavior when the Enter key needs to serve a different purpose, like adding a new row in a Textarea element. To use the Enter key for inserting new lines in a Textarea custom editor, you can stop the default keyboard events propagation in the edit template and avoid triggering the built-in keyboard shortcuts.

html

    <kendo-grid-column field="ProductName" title="Product Name">
        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
            <textarea
                [formControl]="formGroup.get('ProductName')"
                kendoGridFocusable
                (keydown.enter)="$event.stopImmediatePropagation()"
                name="ProductName"
                required
            ></textarea></ng-template
    ></kendo-grid-column>

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...