Kendo Angular Grid --> How to introduce textarea in the Edited row

[Sankar]

Hi Team,

I am using angular Kendo Grid. I introduced edit option in the grid and I have requirement like edit the text with 400 chars in the gird column .

As default while editing the row I am getting Textbox for all columns but here I want textarea for the particular column then I can easily enter the text

Can you please help me on this?

 

 

Thanks

Sankar

[Dimiter Topalov]

Hello Sankar,

You can use the Grid edit templates to provide any custom UI for editing the content of the respective column cells. Editing using Template-driven forms utilize this approach for all Grid columns:

https://www.telerik.com/kendo-angular-ui/components/grid/api/EditTemplateDirective/

While when using Reactive forms you can use the built-in editing UI:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/

... and provide the customized editing UI for the desired column(s) only:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/

Here is an adjusted example that involves a Textarea as opposed to an Input element:

https://stackblitz.com/edit/angular-zaw9y2?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Sankar]

Thanks for your support.

I applied Text area now

[Jean-Christophe]

Hi,

I've defined a column with a textarea editor like this:

<kendo-grid-column width="180" field="pressureSpeed"  title="" [headerStyle]="{'text-transform': 'none' }">
    <ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">
        <textarea rows="5" cols="22" #input [formControl]="formGroup.get(column.field)">
        </textarea>
      </ng-template>
</kendo-grid-column>

 

but when I press the Enter key, it closes the editor. How could I avoid that, and insert a break line instead?

 

[Svet]

Hi Jean-Christophe,

Thank you for the provided sample code.

It does look valid and is in line with the suggested approach in this tread.

But in the provided example of using a textarea element for a column cell editing pressing the Enter key behaves like required. It moves to a new line. I am pasting the example here for reference:

https://stackblitz.com/edit/angular-zaw9y2-hvb1lf?file=app/app.component.ts

Could I ask you to provide a StackBlitz example demonstrating the reported behavior so that we can see the implemented code and try to suggest some further feedback. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Jean-Christophe]

Thanks Svetlin,

I've played with my grid and found that the problem was: [navigable]="true"

by setting that to false it works now :-)

[Martin Bechev]

Hi Jean-Christophe,

In general, when setting navigable option to true, the Enter key begins to perform a different function. However, enabling the navigation does not seems to change the textarea behavior in the example that my colleague shared:

https://stackblitz.com/edit/angular-zaw9y2-9e3nmw?file=app/app.component.ts

Regards,
Martin
Progress Telerik