css - Kendo MVC ListView 小部件无限滚动不起作用

Question

用于 MVC 的 Kendo UI 的最新版本之一包括其 ListView 上的 .Scrollable(ListViewScrollableMode.Endless) 功能，这是我在这里遇到问题的功能，其他问题相同我能找到的标题引用了以前版本的 Kendo 中的“自制”解决方案。

我的问题:

我在这里遵循了剑道指南:https://demos.telerik.com/aspnet-mvc/listview/endless-scrolling - 这解释了如何向 ListView 小部件添加无限滚动，因此我使用以下代码完成:

HTML 页面:

    <script type="text/template" id="reportManagementTemplate">
    <div class="nameBlock">
        <h3 class="nameHeader">#:Username#</h3>
    </div>
</script>

<script type="text/template" id="reportManagementAltTemplate">
    <div class="nameBlock k-alt">
        <h3 class="nameHeader">#:Username#</h3>
    </div>
</script>

<div class="k-content">
    @(Html.Kendo().ListView<Governance.Models.DTO.ReportManagementUsernamesDTO>()
        .Name("ReportUsernameList")
        .TagName("div")
        .ClientTemplateId("reportManagementTemplate")
        .ClientAltTemplateId("reportManagementAltTemplate")
        .Selectable(s => s.Mode(ListViewSelectionMode.Single))
        .HtmlAttributes(new { style = "height:350px; width: 200px;" })
        .Scrollable(ListViewScrollableMode.Endless)
        .DataSource(datasource =>
        {
            datasource.Read(read => read.Action(MVC.TaskReportManagement.ActionNames.ReportManagementList_Read, MVC.TaskReportManagement.Name));
            datasource.PageSize(9);
        })
    )
</div>

CSS:

    .nameBlock {
    float: left;
    position: relative;
    width: 200px;
    height: 100px;
    padding: 0;
}

.nameHeader {
    margin-left: 5px;
}

并且读取语句返回等于我设置的页面大小的字符串，当所有这些代码运行时我得到这个:

如您所见， ListView 中的元素超出了它周围的容器，有人可以帮助解决这个问题吗？

Answer 1

原来我的脚本在更新 kendo 后不是最新的，它们仍然指向 2017 文件夹而不是 2019 文件夹。问题现在已修复。