Kendo MVC ListView 小部件无休止滚动不起作用答案

【问题标题】：Kendo MVC ListView widget endless scrolling not workingKendo MVC ListView 小部件无休止滚动不起作用
【发布时间】：2019-11-24 06:18:53
【问题描述】：

用于 MVC 的 Kendo UI 的最新版本之一在其 ListViews 上包含 .Scrollable(ListViewScrollableMode.Endless) 功能，这是我在此处遇到的问题，我可以找到的其他具有相同标题的问题与“主页”有关以前版本的剑道中制造的解决方案。

我的问题：

我在这里遵循了剑道指南：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;
}

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

如您所见，列表视图中的项目超出了它周围的容器，任何人都可以帮助解决这个问题吗？

【问题讨论】：

我唯一能想到的是，您加载的页面最终会比您的容器大。您的容器高度为 350 像素，如果您以 100 像素的速度加载 9 个字符串，您将达到 900 像素。也许尝试每页执行 3 次以将初始负载保持在较大的容器内。据我所知，其余部分与 KendoDemo 相匹配。
感谢您的建议，我更新剑道后发现我的脚本不是最新的，它们仍然指向 2017 文件夹而不是 2019。问题现已修复。

标签： css asp.net-mvc listview kendo-ui

【解决方案1】：

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

【讨论】：