Problem rendering grid inside template

2 posts, 0 answers
  1. Scott
    Scott avatar
    18 posts
    Member since:
    Mar 2015

    Posted 17 Apr 2015 Link to this post

    I have a grid where each row has a custom command that opens a details modal. The details modal is populated with the contents of a kendo template. I want to include a kendo grid inside of that template.

    Data structure is Contract (main page)->CoveredEquipment (first grid)->WearableParts (grid on modal)

    My problem is that I get a javascript "invalid template" error when the page is loaded. It seems to not like

    #= kendo.render(kendo.template($("\#wearablePartsGridTemplate").html()), WearableParts); #

     in the modal template.

     

    What am I doing wrong?

     

    <script id="wearablePartsGridTemplate" type="x-kendo-template">
     
        @(Html.Kendo().Grid<FieldServiceWeb.Areas.Admin.Models.ServiceContract.WearablePartViewModel>()   
        .Name("wearablePartsGrid")
        .DataSource(dataSource =>
            dataSource.Ajax()
                .Model(model => model.Id(p => p.PartNumber))
                .ServerOperation(false)
                .Update("Update", "ServiceContracts", new { area = "Admin" })
            .Destroy("Delete", "ServiceContracts", new { area = "Admin" })
            .Create("Create", "ServiceContracts", new { area = "Admin" })
        )
        .Columns(columns => {
            columns.Bound(c => c.PartNumber).Title("Part");
            columns.Bound(c => c.Description);
            columns.Bound(c => c.IsActive).Title("Active");
            columns.Command(c => c.Destroy().Text("Delete"));
        })
        .ToClientTemplate())
     
    </script>

    <script type="text/x-kendo-template" id="wearablePartsContent">
            <label>Wearable parts for <strong>#: CSPId # - #: Description #</strong></label>
            #= kendo.render(kendo.template($("\\#wearablePartsGridTemplate").html()), WearableParts); #       
        </script>

    <script>

    function openWearableParts(e) {
                e.preventDefault();

                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

                $("#wearablePartsModal").find(".modal-body").html(wearablePartsTemplate(dataItem));

                //createGrid();

                $("#wearablePartsModal").modal("show");
            }

    </script>

  2. Daniel
    Admin
    Daniel avatar
    2224 posts

    Posted 21 Apr 2015 Link to this post

    Hi,

    You should remove the semi-colon:
    #= kendo.render(kendo.template($("\#wearablePartsGridTemplate").html()), WearableParts) #
    Also, I am not sure why is render used but unless you wish to render a grid template for each item in WearableParts, you should just evaluate the template.
    #= kendo.template($("\#wearablePartsGridTemplate").html())({}) #


    Regards,
    Daniel
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top