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

2 posts, 0 answers
  1. Kerry
    Kerry avatar
    1 posts
    Member since:
    Aug 2012

    Posted 19 Aug 2013 Link to this post

    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>
  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 21 Aug 2013 Link to this post

    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!
Back to Top