Can't use ClientDetailTemplateId for Grid inside the EditorTemplate

[Cuong]

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 !!!

[Tsvetomir]

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

[Cuong]

Thanks admin, it worked well.