New to Kendo UI for Angular? Start a free 30-day trial

Editing the Grid In-Cell with TextArea


ProductProgress® Kendo UI Grid


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


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.

    <kendo-grid-column field="ProductName" title="Product Name">
        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">

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

View Source
Change Theme:

In this article

Not finding the help you need?