Invalid Template error when using editable grid in hierarchical grid.

[Michael]

I am getting an "Invalid Template" error using the latest Telerik MVC libraries 2016.2.607.  The child grid appears to work fine without the editable functions but throws the error when you try to add them back in.  As you can see from the code, I've attempted to isolate the issue by commenting out the editable functions in the child grid.  Any help would be greatly appreciated.

Index.cshtml:

<hr />
<div class="container-fluid">
    @(Html.Kendo().Grid<Applications.TagSubscription.Models.TagGroupModel>()
    .Name("taggroupgrid")
    .Columns(cols =>
    {
        cols.Bound(t => t.Source);
        cols.Bound(t => t.TagName).Title("Subscription Group");
        cols.Bound(t => t.TagGroupTypeName).Title("Subscription Group Type");
        cols.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
    })
    .HtmlAttributes(new { style = "height: 700px;" })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Filterable()
        .Scrollable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5)
        )
        .ClientDetailTemplateId("grp_mbr_template")
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(t => t.TagGroupId))
            .Create(update => update.Action("TagGroupCreate", "Home"))
            .Read(read => read.Action("TagGroupRead", "Home"))
            .Update(update => update.Action("TagGroupUpdate", "Home"))
            .Destroy(update => update.Action("TagGroupDestroy", "Home"))
        )
        .Events(events => events.DataBound("dataBound"))
    )
</div>

<script id="grp_mbr_template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Applications.TagSubscription.Models.TagSubscriptionModel>()
        .Name("taggroupgrid_#=TagName#")
        .Columns(cols =>
        {
            cols.Bound(t => t.Source);
            cols.Bound(t => t.TagName);
            cols.Bound(t => t.Attribute);
            cols.Bound(t => t.TagGroupMemberRoleName).Title("Role");
            cols.Bound(t => t.Description);
            cols.Bound(t => t.Unit);
            cols.Bound(t => t.Frequency);
            cols.Bound(t => t.Resolution);
            cols.Bound(t => t.RetrievalMode);
            cols.Bound(t => t.Facility);
            cols.Bound(t => t.FacilityType);
            cols.Bound(t => t.Equipment);
            cols.Bound(t => t.EquipmentSerial);
            cols.Command(command => {
                    //command.Edit();
                    //command.Destroy();
                }).Width(250);
        })
        .HtmlAttributes(new { style = "height: 550px;" })
        .ToolBar(toolbar => toolbar.Create())
        //.Editable(editable => editable.Mode(GridEditMode.InLine))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Events(events => events.Error("error_handler"))
            .Model(model =>
            {
                model.Id(t => t.Id);
                //model.Field(t => t.Description).Editable(false);
                //model.Field(t => t.Unit).Editable(false);
                //model.Field(t => t.FacilityType).Editable(false);
                //model.Field(t => t.EquipmentSerial).Editable(false);
            })
            .Create(update => update.Action("SubscriptionCreate", "Home"))
            .Read(read => read.Action("SubscriptionRead", "Home", new { TagName = "#=TagName#" }))
            //.Update(update => update.Action("SubscriptionUpdate", "Home"))
            //.Destroy(update => update.Action("SubscriptionDestroy", "Home"))
        )
        .ToClientTemplate()
    )
</script>

<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

HomeController.cs

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Applications.TagSubscription.Models;

namespace Applications.TagSubscription.Controllers
{
    public class TagBaseController : Controller
    {

        public ActionResult Index()
        {
            LoadViewData();

            return View();
        }

        private void LoadViewData()
        {
            ViewData["sources"] = MockData.ReadMockSource();
            ViewData["tags"] = MockData.ReadMockTag();
            ViewData["tagattribute"] = MockData.ReadMockTagAttrib();
            ViewData["taggrouptype"] = MockData.ReadMockTagGroupType();
            ViewData["taggroupmemberrole"] = MockData.ReadMockTagRole();
            ViewData["frequency"] = MockData.ReadMockFrequency();
            ViewData["resolution"] = MockData.ReadMockResolution();
            ViewData["retrievalmode"] = MockData.ReadMockRetrievalMode();
        }

        public ActionResult TagGroupRead([DataSourceRequest] DataSourceRequest request)
        {
            var results = MockData.ReadMockTagGroup();

            return Json(results.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult TagGroupCreate([DataSourceRequest] DataSourceRequest request, TagSubscriptionModel model)
        {
            if (model != null && ModelState.IsValid)
            {
                //TODO: Implement...
            }

            return Json(new[] { model }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult TagGroupUpdate([DataSourceRequest] DataSourceRequest request, TagSubscriptionModel model)
        {
            if (model != null && ModelState.IsValid)
            {
                //TODO: Implement...
            }

            return Json(new[] { model }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult TagGroupDestroy([DataSourceRequest] DataSourceRequest request, TagSubscriptionModel model)
        {
            if (model != null)
            {
                //TODO: Implement...
            }

            return Json(new[] { model }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
        }

        public ActionResult SubscriptionRead([DataSourceRequest] DataSourceRequest request)
        {
            return SubscriptionRead(string.Empty, request);
        }

        public ActionResult SubscriptionRead(string TagName, [DataSourceRequest] DataSourceRequest request)
        {
            var results = MockData.ReadMockSubscription();

            return Json(results.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult SubscriptionCreate([DataSourceRequest] DataSourceRequest request, TagSubscriptionModel model)
        {
            if (model != null && ModelState.IsValid)
            {
                //TODO: Implement...
            }

            return Json(new[] { model }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult SubscriptionUpdate([DataSourceRequest] DataSourceRequest request, TagSubscriptionModel model)
        {
            if (model != null && ModelState.IsValid)
            {
                //TODO: Implement...
            }

            return Json(new[] { model }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult SubscriptionDestroy([DataSourceRequest] DataSourceRequest request, TagSubscriptionModel model)
        {
            if (model != null)
            {
                //TODO: Implement...
            }

            return Json(new[] { model }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
        }


    }
}

 

[Michael]

More info...

The child grid works fine when pulled out of the template and placed in it's own <div> element and the "ToClientTemplate" is not implemented.

[Michael]

More info...

The child grid works fine when not run as a template but put into a div element and the ToClientTemplate is not implemented.

[Maria Ilieva]

Hi Michael,

The presented code looks absolutely correct to me. Therefore can you please open a regular support ticket and send us isolated version of your applictaion including the model, as I suppose that the issue might be in some templates in the model?

Regards,
Maria Ilieva
Telerik

[Michael]

Will do.

[Michael]

I found the issue.  I had a template for one of the columns that contains a form.  In the form, I had a label "Serial #".  The error was generated due to the "#" symbol in the label because it was unescaped.  When I escaped the "#" character the child grid edit mode worked.

[Maria Ilieva]

Hello Michael,

I'm glad that you were able to isolate the issue on your end and for share the solution. It will be of a big help for other users that are facing the same problem.
Do not hesitate to contact us back in case furtehr assistance is needed.


Regards,
Maria Ilieva
Telerik