Kendo ScrollView处于首页面时无法刷新重绘的问题求助

问题背景 #

在表单中使用Kendo ScrollView展示人物图片，用户修改图片顺序保存后，需要让ScrollView重新加载数据并滚动到第一项以新顺序展示。但发现当ScrollView当前处于首页面时，该页面不会被刷新/重绘，非首页面则能正常更新。

现有代码 #

ScrollView配置（ASP.NET MVC） #

@(Html.Kendo().ScrollView()
    .Name("personImage")
    .TemplateId("personImageTemplate")
    .DataSource(d => d
        .Custom()
        .Type("aspnetmvc-ajax")
        .Transport(t => t
            .Read(r => r.Action("PersonImages_Read", "Person", new { personID = Model.ID } ))
        )
        .Schema(s => s.Data("Data").Total("Total"))
        .ServerPaging(false)
        .PageSize(1)
    )
)

模板代码 #

<script type="text/x-kendo-tmpl" id="personImageTemplate">
    <img class="personImage" 
         src="@(Url.Action("ImageRender", "Person"))?imageID=#= data.ID #"
         title="#= data.Filename #" />
</script>

刷新函数 #

function refreshPersonImageScrollView() {
    var scrollView = $("#personImage").data("kendoScrollView");
    if (scrollView) {
        scrollView.dataSource.read();

        // 文档说明refresh会重绘，但实际无效
        scrollView.refresh();
        
        // 滚动到第一张图
        scrollView.scrollTo(0);
    }
}

问题现象 #

• 非首页面状态：执行PersonImages_Read读取数据，滚动到第一项，同时触发前3项的ImageRender请求，正常渲染新内容。
• 首页面状态：仅执行PersonImages_Read，但首页面的图片不会重新请求/渲染，内容无更新。

解决方案 #

问题根源是Kendo ScrollView对当前活跃页面的缓存机制，refresh()方法无法强制重新渲染已加载的当前项，以下是几种可行解决方法：

方法1：利用数据源change事件手动更新当前视图 #

在数据源读取完成后，手动替换当前活跃页面的内容，绕过缓存机制：

function refreshPersonImageScrollView() {
    var scrollView = $("#personImage").data("kendoScrollView");
    if (!scrollView) return;

    // 解绑重复的change事件，避免多次触发
    scrollView.dataSource.off("change");
    
    scrollView.dataSource.read().then(function() {
        scrollView.scrollTo(0);
        
        // 获取当前活跃页面，用新数据重新渲染模板
        var activePage = scrollView.element.find(".k-scrollview-page.active");
        if (activePage.length > 0) {
            var template = kendo.template($("#personImageTemplate").html());
            var firstItem = scrollView.dataSource.view()[0];
            activePage.html(template(firstItem));
        }
    });
}

方法2：强制销毁并重建ScrollView #

如果轻量方法无效，可彻底重建ScrollView实例：

function refreshPersonImageScrollView() {
    var scrollViewEl = $("#personImage");
    var scrollView = scrollViewEl.data("kendoScrollView");
    
    if (scrollView) {
        scrollView.destroy();
        scrollViewEl.empty();
    }
    
    // 重新初始化ScrollView
    scrollViewEl.kendoScrollView({
        templateId: "personImageTemplate",
        dataSource: {
            type: "aspnetmvc-ajax",
            transport: {
                read: {
                    url: "@Url.Action("PersonImages_Read", "Person")",
                    data: { personID: @Model.ID }
                }
            },
            schema: {
                data: "Data",
                total: "Total"
            },
            serverPaging: false,
            pageSize: 1
        },
        navigate: function() {
            this.scrollTo(0);
        }
    });
}

方法3：给图片URL添加时间戳破缓存 #

若问题是浏览器缓存导致图片不更新，可在模板中给图片URL添加时间戳参数：

<script type="text/x-kendo-tmpl" id="personImageTemplate">
    <img class="personImage" 
         src="@(Url.Action("ImageRender", "Person"))?imageID=#= data.ID #&t=#= new Date().getTime() #"
         title="#= data.Filename #" />
</script>

此方法配合原有刷新函数使用，能确保每次刷新都请求最新图片。

说明 #

以上方法覆盖Kendo版本2021.3.1109和2022.3.913，均可解决首页面不重绘问题。建议优先使用方法1，开销小且能满足多数场景；方法2适合极端情况；方法3针对浏览器缓存问题。

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