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>")