Kendo grid with subgrid ClientTemplate 模板错误

Question

如果单击父网格项，子网格将展开。如果子网格模型的 ItemState 未被批准，我想显示一个按钮来删除该行。但是我得到 'Uncaught Error: Invalid template'

我试过了：

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>" +
 "# } #"
);

得到 'ItemState' 未定义。因为使用了来自父级的模型并且 ItemState 不存在！

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>" +
 "# } #"
);

得到'Invalid template'

另一种尝试是使用排除的 javascript 函数

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("");
    } 
}

它正在运行，我得到了我需要的值。但是 telerik 网格没有渲染 html。所以它只显示原始 html

父子网格完整代码

@(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

经过反复试验，我找到了可行的解决方案

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>" +
      "\# } \#"
);

Kendo grid with subgrid ClientTemplate 模板错误

Kendo grid with subgrid ClientTemplate wrong template

c#

kendo-ui

kendo-ui-grid