Using the EditTemplateDirective inside kendoGridDetailTemplate

[Rebekah]

I have an editable grid based off this example. It works as expected, except that I need each row to have a detail row with a single text field in it, no columns. The EditTemplateDirective doesn't work outside of a kendo-grid-column. Is there another way to do this?

I would like to avoid creating a separate grid within my detail template if possible since this is a single form. 

Here is what I have for my detail template: 

<ng-template kendoGridDetailTemplate let-dataItem>
       {{dataItem.TSRs}}
     <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
         <input  kendoTextBox [value]="dataItem.TSRs" [formControl]="formGroup.get('TSRs')">
     </ng-template>
</ng-template>

 

Thanks!

[Daniel]

Hello,

Are you trying to achieve something similar to the detail editor in this example?

Regards,
Daniel
Progress Telerik

[Rebekah]

Correct. This example is extremely helpful. Thank you!

Only issue now, is when you add a new row, it doesn't add a new detail row too. In the example you provided adding a new row doesn't let you close/save the row.

[Dimiter Topalov]

Hello Rebekah,

The scenario is not supported out-of-the-box as the newly added item is not actually part of the Master Grid data yet and thus a detail template cannot be rendered for it.

As a workaround you can handle adding new item manually and in a custom manner - add an "empty" item to the Grid data, edit it and upon saving implement some custom logic for replacing the added "dummy" item with the one coming after editing the form, e.g.:

http://plnkr.co/edit/dXnNRLakItDjsyatsOOd?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Rebekah]

Worked perfectly. Thank you!