Kendo grid with subgrid ClientTemplate wrong template

Question

If a parent grid item is clicked a subgrid expand. If the ItemState of the subgrid model is not approved I want to show a button to delete the row. But I get 'Uncaught Error: Invalid template'

I tried:

columns.Bound(c => c.Id).ClientTemplate(
 "# if (ItemState != 1 ) { #" +
 "<button type='button' class='btn btn-delete' onclick=\"deleteChildBtn('\\#: 
 Id \\#')\"><span class='fa fa-trash'></span></button>" +
 "# } #"
);

Got 'ItemState' not definied. Because the model from the parent was used and there the ItemState does not exist!

columns.Bound(c => c.Id).ClientTemplate(
 "# if (\\#: data.ItemState \\# != 1 ) { #" +
 "<button type='button' class='btn btn-delete' onclick=\"deleteChildBtn('\\#: 
 Id \\#')\"><span class='fa fa-trash'></span></button>" +
 "# } #"
);

columns.Bound(c => c.Id).ClientTemplate(
 "# if (\\#: ItemState \\# != 1 ) { #" +
 "<button type='button' class='btn btn-delete' onclick=\"deleteChildBtn('\\#: 
 Id \\#')\"><span class='fa fa-trash'></span></button>" +
 "# } #"
);

Got 'Invalid template'

Another try was to use a excluded javascript function

columns.Bound(c => c.Bound).ClientTemplate("\\#: test(data) \\#").Encoded(false);

....
function test(data) {
   if (data.ItemState != 1) {
     return kendo.format("<button type='button' class='btn btn-delete' 
     onclick='deleteChildBtn({0})'><span class='fa fa-trash'></span> 
     </button>", data.Id);
    } else {
      return kendo.format("");
    } 
}

It's working und I got my needed values. But the telerik grid did not render the html. So it is only displaying the raw html

The complete code of the parent und sub grid

@(Html.Kendo().Grid<Models.SalesPosition>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Template(@<p></p>).HtmlAttributes(new { style = "width:5px; text-align:left;" }).HeaderHtmlAttributes(new { style = "width:5px;" });
                columns.Bound(c => c.PositionNumber);
                columns.Bound(c => c.ItemDescription);
                columns.Bound(c => c.ItemCode);
                columns.Bound(c => c.DrawingNumberIndex)
                columns.Bound(c => c.SalesUnit).ClientTemplate("#: OrderedQuantity # #: SalesUnit #");
                if (User.IsInRole(ActiveDirectoryGroups.Admin))
                {
                    columns.Bound(c => c.Id).ClientTemplate(
                        "<button type='button' class='btn btn-delete' onclick=\"deleteBtn('#: Id #')\"><span class='fa fa-trash'></span></button>"
                        ).Width(80).Title("");

                    columns.Bound(c => c.Id).ClientTemplate(
                    "<button type='button' class='btn btn-add' onclick=\"callAddChildItemModal('#: Id #')\"><span class='fa fa-plus'></span></button>"
                    ).Width(80).Title("");
                }
            })
            .AutoBind(true)
            .DataSource(ds =>
                ds.Ajax()
                .PageSize(50)
                .Read(read => read.Action("GetWhereSalesOrder", "SalesPosition", new { salesOrder = ViewBag.Item.SalesOrder1 }))
                .ServerOperation(false)
            )
            .Scrollable(a => a.Height("auto"))
            .ClientDetailTemplateId("templateArticle")
            .Selectable()
            .Pageable(p => p.Refresh(false).Numeric(true).Enabled(true))
            .Events(events => events.Change("toggleRow").DataBound("setSalesPositionColor"))
)

// Subgrid
<script id="templateArticle" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Models.Item>()
        .Name("grid#=Id#")
        .Columns(columns =>
        {
            columns.Template(@<p></p>).HtmlAttributes(new { style = "width:5px; text-align:left;" }).HeaderHtmlAttributes(new { style = "width:5px;" });
                    columns.Bound(c => c.ItemDescription);
                    columns.Bound(c => c.ItemCode);
                    columns.Bound(c => c.DrawingNumberIndex);
                    columns.Bound(c => c.Amount);
                    columns.Bound(c => c.Size);
                    columns.Bound(c => c.Id).ClientTemplate(
                       "# if (\\#: data.ItemState \\# == 1) { #" +
                        "<button type='button' class='btn btn-delete' onclick=\"deleteChildBtn('\\#: Id \\#')\"><span class='fa fa-trash'></span></button>" +
 "# } #").Width(80).Title("");
            }
        })
              .AutoBind(true)
              .DataSource(ds =>
                   ds.Ajax()
                        .Read(read => read.Action("GetWhereSalesPositionId", "SalesPositionItem").Data("{ id: '#: Id #' # if (cbhShowOnlyInCrate.checked) { # , onlyInCrate: true # } #}"))
                         .ServerOperation(false)
                         )
                .Events(events => events.DataBound("articleDataBound"))
                .ToClientTemplate()
    )

Answer 1

After more trail and error I found a working solution

columns.Bound(c => c.Id).ClientTemplate(
      "\\# if (ItemState != 1) { \\#" +
      "<button type='button' class='btn btn-delete' onclick=\"deleteChildBtn('\\#: Id \\#','#: Id #')\"><span class='fa fa-trash'></span></button>" +
      "\\# } \\#"
);