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

Can't use ClientDetailTemplateId for Grid inside the EditorTemplate

2 Answers 440 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Cuong
Top achievements
Rank 1
Cuong asked on 13 Apr 2019, 08:43 AM

Hello Admin.
    I have a Grid, it is using EditorTemplate("_StaffTmp"):

01.    Html.Kendo().Grid<StaffDto>()
02.    .Name("staffGrid")
03.    .Columns(columns =>
04.    {
05.        columns.Bound(p => p.StaffCode);
06.        columns.Bound(p => p.FullName);
07.    })
08.    .Editable(editable =>
09.    {
10.        editable.Mode(GridEditMode.PopUp).TemplateName("_StaffTmp");
11.    })
12....

 

    Inside "_StaffTmp" view, I set up a Grid and use ClientDetailTemplateId for it:

01.@(
02.    Html.Kendo().Grid<StaffCertificatesDto>()
03.    .Name("staffCertsGrid")
04.    .Columns(columns =>
05.    {
06.        columns.Bound(p => p.Code).Title(LanguageData["L-00065"]);
07.        columns.Bound(p => p.Name).Title(LanguageData["L-00066"]);
08.    })
09.    .ClientDetailTemplateId("salaryDetailGrid1")
10.    .DataSource(dataSource => dataSource
11.        .Ajax()
12.        .PageSize(20)
13.        .Model(model =>
14.        {
15.            model.Id(p => p.StaffCertificateId);
16.            model.Field(f => f.Code).DefaultValue("Code");
17.            model.Field(f => f.Name).DefaultValue("Name");
18.            model.Field(f => f.AlertLevel1).DefaultValue(0);
19.        })
20.    .Read(read => read.Action("LoadStaffCertificate", "Staff", new { @area = "Office" }).Type(HttpVerbs.Post))
21.))
22. 
23.<script id="salaryDetailGrid1" type="text/kendo-tmpl">
24.    @(
25.            Html.Kendo().Grid<StaffCertificatesDto>()
26.            .Name("salaryDetailGrid1_#=CertificateId#")
27.            .Columns(columns =>
28.            {
29.                columns.Bound(p => p.Code).Title(LanguageData["L-00065"]);
30.                columns.Bound(p => p.Name).Title(LanguageData["L-00066"]);
31.            })
32.            .DataSource(dataSource => dataSource
33.                .Ajax()
34.                .PageSize(20)
35.                .Model(model =>
36.                {
37.                    model.Id(p => p.StaffCertificateId);
38.                })
39.            .Read(read => read.Action("LoadStaffCertificate", "Staff", new { staffId = "#=StaffId#" }).Type(HttpVerbs.Post))
40.        ).ToClientTemplate())
41.</script>

 

   But I got an error in console browser when I ran: "Uncaught Error: Invalid template:'    <div class="k-widget k-grid" id="salaryDetailGrid1_#=CertificateId#"><table><colgroup><col /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="Code" data-index="0" data-title="Code" scope="col"><span class="k-link...". Even, I can't open the popup "_StaffTmp" when I edit.

    If I remove ".ToClientTemplate()" in detail grid id = "salaryDetailGrid1", I can run and open the popup. But my detail grid id = "salaryDetailGrid1" didn't work and I got another error in console browser: "Uncaught SyntaxError: Unexpected token < at eval (<anonymous>)....".

    Could you help me resolve my issue ? Please explain to me why it is. Thanks !!!

2 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 17 Apr 2019, 02:19 PM
Hi Cuong,

When a hierarchy grid is used as a popup editor template for another grid, faulty behavior would occur. This is due to the fact that there are several levels of nesting both - scripts and templates. Even though the templates could possibly be escaped, the nesting of script tags is invalid and the browsers will not behave as expected. 

The one and only solution to this scenario would be to get the detail template grid and put it in the View. Therefore, the PopUp template would consist only from the grid which should have the following property:

.ClientDetailTemplateId("OrdersTemplate")

And now, the OrdersTemplate should be located in the same View as the main grid. 

I am attaching a sample grid in which this functionality could be observed. Give it a try and let me know in case the issue persists.


Kind regards,
Tsvetomir
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
Cuong
Top achievements
Rank 1
answered on 06 May 2019, 06:23 AM
Thanks admin, it worked well.
Tags
General Discussions
Asked by
Cuong
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Cuong
Top achievements
Rank 1
Share this question
or