kendo ui "Invalid template" error in a column client template within a detail template

I have a grid with a client detail template. This detail template is rendered in a separate partial view. Within this grid I need to use client templates to format some of the columns. Unfortunately I run into an invalid template error.

This is my detail template:

<script id="operationDetailTemplate" type="text/kendo-template">
@(Html.Kendo().TabStrip()
    .Name(componentName: "tabStrip_#=Id#")
    .SelectedIndex(index: 0)
    .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
    .Items(items => {
        items.Add().Text(this.LocalResources(key: "Messages")).Content(@<text>
            @(Html.Kendo().Grid<NotificationViewModel>()
                .Name(componentName: "notificationGrid_#=Id#")
                .Pageable()
                .Scrollable()
                .Filterable()
                .Sortable()
                .Columns(col => {
                    col.Bound(c => c.DateCreated).Format(value: "{0:yyyy/MM/dd HH:mm}");
                    col.Bound(c => c.Severity);
                    col.Bound(c => c.Title);
                    col.Bound(c => c.Text).ClientTemplate(string.Format("{0}...", "#= formatter(Text, 20) #"));
                })
                .DataSource(ds => ds.Ajax().Sort(sort => sort.Add(memberName: "DateCreated").Descending())
                    .Read(read => read.Route(MessageEventControllerRoute.PostReadForOperation, new RouteValueDictionary { { "operationId", "#=Id#" }, { "culture", UICulture.ToLower() } })))
                .ToClientTemplate())
        </text>
            );
        items.Add().Content(@<text>
            @(Html.Kendo().Grid<OperationViewModel>().Name(componentName:"alternativesGrid")
                .Columns(col => {
                    col.Bound(op => op.OperationIdFormatted);
                    col.Bound(op => op.EfficiencyRank);
                    col.Bound(op => op.WorkOrder.WorkOrderIdFormatted);
                    col.Bound(op => op.Length)
                        .ClientTemplate(value: "#if (data.Length) {# #:kendo.toString(Length.Hours, '00')#:#:kendo.toString(Length.Minutes, '00')#:#:kendo.toString(Length.Seconds, '00')# #}#")
                        .EditorTemplateName(templateName: "TimeSpan");
                })
                .DataSource(ds => ds.Ajax()
                .Read(read => read.Route(OperationControllerRoute.PostOperationAlternatives, new RouteValueDictionary { { "workOrderId", "#=Operation.WorkOrderId#" }, { "seqNo", "#=Operation.SequenceNumber#" }, { "culture", UICulture.ToLower() } })).Model(m => m.Id(op => op.Id)))
                .ToClientTemplate()
            )</text>);
    })
    .ToClientTemplate())
</script>

As I am not able to pass an template id to the column template, I have no idea how to avoid the invalid template error.

Any ideas how to use client templates in this scenario?

Regards Bernd

After some more experimenting I found two solutions.

1. Escape the client template in the low level grid.

Using

            .ClientTemplate(value: "\\#if (data.Length) {\\# \\#:kendo.toString(Length.Hours, '00')\\#:\\#:kendo.toString(Length.Minutes, '00')\\#:\\#:kendo.toString(Length.Seconds, '00')\\# \\#}\\#")

instead of

            .ClientTemplate(value: "#if (data.Length) {# #:kendo.toString(Length.Hours, '00')#:#:kendo.toString(Length.Minutes, '00')#:#:kendo.toString(Length.Seconds, '00')# #}#")

2. Change the tab content to load on demand.

Only problem here is that the ajax data source isn't called. So pass a model to the partial view and remove the

    .ToClientTemplate()

instruction.