kendo scrollview as clientTemplate doesnt work when providing it a template

I am working on a page of a website using Kendo ASP.NET MVC.

What I need is a table with a detail row. Within that detail row, I require a Kendo ScrollView to display images.

When I attempt to use a template to format the ScrollView data, I encounter an error indicating that the template containing the ScrollView is invalid.

Is it that I cannot use nested templates for ScrollViews, or is there a way to achieve this?

<script id="showDefectDetails" type="text/x-kendo-template">
    @(Html.Kendo().ScrollView()
        .Name("scrollView_#=DefectID#")
        .ContentHeight("100%")
        .TemplateId("scrollview-template")
        .DataSource(dataSource => dataSource
            .Custom()
            .Type("aspnetmvc-ajax")
            .Transport(transport => transport
            .Read(read => read.Action("DefectImage_Read", "InspectionData", new { defectId = "#=DefectID#" }))
            )
            .Schema(s => s.Data("Data").Total("Total"))
            .ServerPaging(true)
            .PageSize(1))
        .HtmlAttributes(new { style = "height:40vh; width:80vw" })
        .ToComponent()
        .ToClientTemplate()
    )
</script>

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

The solution to this ended up being to just directly write the content of the scrollview into Template function as HTML

like the following:

.Template("<div><p>Defect Position: #=data.Position# </p><div class=\"card-body\"><div><p class =\"center\">There Are No Images</p> </div> </div> </div>")