Kendo ScrollView作为ClientTemplate使用模板时失效问题求助

问题说明 #

用Kendo ASP.NET MVC开发带详情行的表格时，想在详情行里用ScrollView展示图片，但给ScrollView设置模板时，系统提示包含该ScrollView的外层模板无效。核心原因是Kendo模板嵌套时，内部模板的#符号会和外层模板的解析逻辑冲突——外层模板编译时会把内部ScrollView配置里的#=DefectID#、以及引用的子模板里的#=data.DisplayName#当成自己的变量解析，导致语法错误。

解决办法 #

方法1：转义外层模板中的内部变量 #

把ScrollView配置里的#替换成\\#，避免外层模板误解析内部变量。同时改用客户端初始化的方式创建ScrollView，不在服务器端模板里直接渲染组件：

<script id="showDefectDetails" type="text/x-kendo-template">
    <div id="scrollView_container_\\#=DefectID\\#" style="height:40vh; width:80vw"></div>
    <script>
        $(function() {
            $("#scrollView_container_#=DefectID#").kendoScrollView({
                contentHeight: "100%",
                templateId: "scrollview-template",
                dataSource: {
                    type: "aspnetmvc-ajax",
                    transport: {
                        read: {
                            url: '@Url.Action("DefectImage_Read", "InspectionData")',
                            data: { defectId: "#=DefectID#" }
                        }
                    },
                    schema: {
                        data: "Data",
                        total: "Total"
                    },
                    serverPaging: true,
                    pageSize: 1
                }
            });
        });
    <\/script>
</script>

<script id="scrollview-template" type="text/x-kendo-template">
    <p>#=data.DisplayName#</p>
</script>

方法2：延迟初始化ScrollView #

不在外层模板里直接生成ScrollView，而是借助Grid的detailExpand事件，在详情行展开时再手动初始化对应组件，彻底避开模板嵌套冲突：

// Grid配置中添加详情展开事件
@(Html.Kendo().Grid<YourModel>()
    .Name("grid")
    .Columns(columns => {
        // 你的列配置
    })
    .DetailTemplateId("showDefectDetails")
    .Events(events => events.DetailExpand("onDetailExpand"))
    // 其他Grid配置
)

<script id="showDefectDetails" type="text/x-kendo-template">
    <div id="scrollView_container_#=DefectID#" style="height:40vh; width:80vw"></div>
</script>

<script id="scrollview-template" type="text/x-kendo-template">
    <p>#=data.DisplayName#</p>
</script>

<script>
    function onDetailExpand(e) {
        var defectId = e.data.DefectID;
        var container = $("#scrollView_container_" + defectId);
        
        // 防止重复初始化组件
        if (!container.data("kendoScrollView")) {
            container.kendoScrollView({
                contentHeight: "100%",
                templateId: "scrollview-template",
                dataSource: {
                    type: "aspnetmvc-ajax",
                    transport: {
                        read: {
                            url: '@Url.Action("DefectImage_Read", "InspectionData")',
                            data: { defectId: defectId }
                        }
                    },
                    schema: {
                        data: "Data",
                        total: "Total"
                    },
                    serverPaging: true,
                    pageSize: 1
                }
            });
        }
    }
</script>

补充说明 #

Kendo并非完全不支持嵌套模板，但必须处理模板解析时的符号冲突。延迟初始化的方式不仅能解决冲突，还能控制组件创建时机，提升页面加载性能。

内容的提问来源于stack exchange，提问作者Daniel Larrad