CODEWITHSUNDEEP
jqueryangularjsangularjs-directivekendo-uikendo-grid
ARUNRAJ
ARUNRAJ

Reputation: 489

kendo grid virtual scrolling last row is missing

I am working on a kendo web aaplication. I have a kendo grid and virtual scrolling is enabled.Last row is missing while scrolling the grid but i can see that record by filtering.In IE it is working perfectly.

total recors : 374

If I show 11 records in a page it is working perfectly in IE and chrome because 374/11 is 34(not a decimal).If a change total row number to 12 last row is missing in chrome but still IE is perfect.I was face an issue line initially scroll bar is not visible but I fix that issue by using below code.

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

It's call after grid initialization.Inital scroll is ok now.Any help for last row missing?

Upvotes: 1

Views: 3148

Answers (3)

Timofey Orischenko
Timofey Orischenko

Reputation: 1178

Just met this issue )

My solution was pretty simple, not sure it will work for all cases, but I just decided to scroll down content after scrollbar reaches bottom:

            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);
            },

Upvotes: 0

srs
srs

Reputation: 68

Virtual scrolling relies on calculations about the average row height, which is used to calculate the height of the fake vertical scrollbar.

jQuery solution

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 solution:

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

More details about css: http://www.telerik.com/forums/last-row-gets-cut-off-when-using-virtual-scrolling-and-setting-the-grid-height-after-filtering#kBSbnkqkSU6AG9kBmm1KYA

Upvotes: 1

TheCoder
TheCoder

Reputation: 41

I also faced similar issue. It got resolved after specifying height of grid.

height:400

Upvotes: 0

Related Questions