This is a migrated thread and some comments may be shown as answers.

Using the EditTemplateDirective inside kendoGridDetailTemplate

4 Answers 81 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Rebekah
Top achievements
Rank 1
Rebekah asked on 25 Jul 2018, 02:03 PM

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!

4 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 27 Jul 2018, 05:35 AM
Hello,

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

Regards,
Daniel
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Rebekah
Top achievements
Rank 1
answered on 27 Jul 2018, 03:23 PM

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.

0
Accepted
Dimiter Topalov
Telerik team
answered on 31 Jul 2018, 12:26 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Rebekah
Top achievements
Rank 1
answered on 06 Aug 2018, 02:19 PM
Worked perfectly. Thank you!
Tags
General Discussions
Asked by
Rebekah
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Rebekah
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or