[Solved] When using a master detail grid with a client template, I am getting a syntax error

[Kerry]

I am using a master detail grid in Ajax mode with a client grid in a client template.  If I don't include the client template, everything is fine.  When I do include the client template, I get a syntax error for every line in the master grid.  The syntax error is the ImageId (the model id) of the master grid.  I can see no reference to it anywhere in the runtime code.

A second, somewhat related question is how do I reference items in the client grid?  For instance when I am creating the client grid in the template, I can get the value of the ImageId from the master grid using "#=ImageId#'.  However, if I try to reference the fields of the client grid data structure the same way I get an error saying it can't find the field.  I am assuming this is because it is looking in the master grid data structure.  How do I reference the client data structure's fields?

Thank you,
Kerry

The aspx is included below:

01.<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<int?>" %>
02.<%@ Import Namespace="WellsFargo.NewsPub.Web.UI.Areas.Attachment.Models" %>
03.<%
04.    var workflowUrl = Url.Content("~/" + Constants.Areas.Attachment + "/" + Constants.Controllers.Image + "/" + Constants.ImageController.ExecuteImageWorkflowCommand);
05.%>
06.<% Html.Kendo().Grid<ImageModel>()
07.       .Name("PublicationImagesGrid")
08.       .DataSource(dataSource => dataSource
09.                                     .Ajax()
10.                                     .Model(model => model.Id(i => i.ImageId))
11.                                     .Read(Constants.ImageController.ReadPublicationImages, Constants.Controllers.Image, new { publicationId = Model })
12.                                     .Destroy(destroy => destroy.Action(Constants.ImageController.DeleteImage, Constants.Controllers.Image))
13.       )
14.       .HtmlAttributes(new { @class = "image-grid" })
15.       .Columns(columns =>
16.                    {
17.                        columns.Bound(pub => pub.PublicationId).Hidden(true);
18.                        columns.Bound(pub => pub.ImageId);
19.                        columns.Bound(c => c.Thumbnail)
20.                               .Title("Thumbnail")
21.                               .Width(1)
22.                               .ClientTemplate("<img src='#= ThumbnailSrc #" + "' alt='#= Tag #' />");
23.                        columns.Bound(pub => pub.ImageSortOrder).Title("Sort Order");
24.                        columns.Bound(c => c.FileName)
25.                               .Title("File Name")
26.                               .Width(1);
27.                        columns.Bound(c => c.Dimensions)
28.                               .Width(1);
29.                        columns.Bound(c => c.Tag);
30.                        columns.Bound(c => c.Caption);
31.                        columns.Bound(c => c.ImageId)
32.                               .ClientTemplate("#= get_image_approval_control('"
33.                                               + workflowUrl
34.                                               + "', ImageId, 1, '"
35.                                               + Constants.ImageController.ReadPublicationImages + "', "
36.                                               + (int)DataConstants.ImageStatus.Approved + ", "
37.                                               + (int)DataConstants.ImageStatus.Rejected + ", "
38.                                               + (int)DataConstants.ImageStatus.ApprovalRequired + ") #")
39.                               .Width(150)
40.                               .Title("Status");
41.                        columns.Command(command => command.Destroy());
42.                        columns.Bound(c => c.Height).Hidden(true);
43.                    })
44.       .ClientDetailTemplateId("child-image-template")
45.       .ToolBar(toolbar => toolbar.Template(() =>
46.                                                { %> <a onclick='create_image(<%= Model %>)' class='k-button'>Add New Image</a> <% }))
47.       .Events(e => e
48.           .DataBound("image_grid_data_bound")
49.       )
50.       .Render();
51.%>
52.
53.<script id="child-image-template" type="text/x-kendo-template">
54.    <%= Html.Kendo().Grid<ChildImageDto>()
55.    .Name("ChildImages_#=ImageId#")
56.    .DataSource(ds => ds.Ajax().Read(Constants.ImageController.ReadChildImages, Constants.Controllers.Image, new {parentImageIdStr = "#=ImageId#"}))
57.    .Columns(col => {
58.            col.Bound(i => i.ChildImageId);
59.            col.Bound(i => i.MimeType);
60.            col.Bound(i => i.Dimensions);
61.            col.Bound(i => i.BinarySrc).ClientTemplate("<img src='#=BinarySrc#' alt='#=Tag#' />");
62.    })
63.    .ToClientTemplate() %>
64.</script>

[Rosen]

Hi Kerry,

I'm afraid that I'm not exactly sure what is causing the issue you have described. Therefore, could you please provide a small runnable sample in which it can be observed locally.

Regarding, your other question. If I understood correctly, you want to use a field from the child data item within a ClientTemplate of the child grid. If this is the case you will need to escape the ClientTemplate's code block in order to prevent it from executing during the actual DetailTemplate execution:

<script id="child-image-template" type="text/x-kendo-template">
    <%= Html.Kendo().Grid<ChildImageDto>()
          //.....
    .Columns(col => {
           //....
            col.Bound(i => i.BinarySrc).ClientTemplate("<img src='\\#=BinarySrc\\#' alt='\\#=Tag\\#' />");
    })
    .ToClientTemplate() %>
</script>

Regards,
Rosen
Telerik