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

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

1 Answer 80 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kerry
Top achievements
Rank 1
Kerry asked on 19 Aug 2013, 02:42 PM

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>

1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 21 Aug 2013, 07:48 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Kerry
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or