剑道网格虚拟滚动最后一行丢失

Question

我正在开发剑道网络应用程序。我有一个剑道网格，并且启用了虚拟滚动。滚动网格时缺少最后一行，但我可以通过过滤看到该记录。在 IE 中，它工作正常。

总记录：374

如果我在页面中显示 11 条记录，它在 IE 和 chrome 中工作正常，因为 374/11 是 34（不是小数）。如果将总行数更改为 12 最后一行在 chrome 中丢失，但 IE 仍然是完美的。我面临一个问题行最初滚动条不可见，但我使用下面的代码解决了这个问题。

function setVisibleScrollHeight() {
        var vs = grid.element.find('.k-grid-content').data('kendoVirtualScrollable');
        grid._rowHeight = gridRowHeight;
        vs.refresh();
    }

网格初始化后调用。初始滚动现在可以了。最后一行丢失有什么帮助吗？

Answer 1

虚拟滚动依赖于平均行高的计算，该平均行高用于计算假垂直滚动条的高度。

jQuery 解决方案

dataBound: function () {
  window.setTimeout(function(){
    var ht=0;jQuery('#grid').find("tr[role='row']").each(function(){ 
    ht+=parseInt($(this).height()); 
}); 
// ht - total rows height
jQuery("#grid").find(".k-scrollbar-vertical").find("div").height(ht);     /// set kendo scrollbar height to ht 
} ,1000);  
} //databound ends

css解决方案：

  #Grid  .k-grid-content  td
{
  height: 100px;
}

关于CSS的更多细节： http://www.telerik.com/forums/last-row-gets-cut-off-when-using-virtual-scrolling-and-setting-the-grid-height-after-filtering#kBSbnkqkSU6AG9kBmm1KYA

Answer 2

我也面临类似的问题。指定网格高度后就解决了。

height:400

Answer 3

刚刚遇到这个问题）

我的解决方案非常简单，不确定它是否适用于所有情况，但我只是决定在滚动条到达底部后向下滚动内容：

            dataBound: function (e) {
                if (isScrollEventInitialized) {
                    return;
                }
                isScrollEventInitialized = true;
                const sender = e.sender;
                const wrapper = sender.virtualScrollable.wrapper;
                const scrollbar = sender.virtualScrollable.verticalScrollbar;

                setTimeout(function () {
                    scrollbar.on('scroll', function (event) {
                        var target = event.target;
                        if (target.offsetHeight + target.scrollTop >= target.scrollHeight) {
                            wrapper.animate({ scrollTop: wrapper.height() }, 200);
                        }
                    });
                }, 100);
            },