I have 2 tables rendered with kendo grid, these are scrollable. I have code which needs to be executed whenever the scroll happens in any of the table.

I've tried

jQuery("#grid").kendoGrid({
    dataSource : dataSource,
    columns : [{
        field : 'name',
        title : 'Name',
        width : '160px'
    }, {
        field : 'dataTypeId.name',
        title : 'Type',
        width : '70px'
    }],
    height : 270,
    scrollable : true,
    AfterScroll: function() {
        console.log("scrolled");
    },
    rowTemplate : kendo.template(jQuery("#custom-input-grid-rows").html()),
}).data("kendoGrid");

I tried to put some callbacks like onScroll, AfterScroll but they did not work for me.

How do I get a callback when scrolling happens in the kendo grid?

I have 2 tables rendered with kendo grid, these are scrollable. I have code which needs to be executed whenever the scroll happens in any of the table.

I've tried

jQuery("#grid").kendoGrid({
    dataSource : dataSource,
    columns : [{
        field : 'name',
        title : 'Name',
        width : '160px'
    }, {
        field : 'dataTypeId.name',
        title : 'Type',
        width : '70px'
    }],
    height : 270,
    scrollable : true,
    AfterScroll: function() {
        console.log("scrolled");
    },
    rowTemplate : kendo.template(jQuery("#custom-input-grid-rows").html()),
}).data("kendoGrid");

I tried to put some callbacks like onScroll, AfterScroll but they did not work for me.

How do I get a callback when scrolling happens in the kendo grid?

• javascript
• jquery
• kendo-ui
• kendo-grid

• Those events don't exist in kendo grid, so you can't just simply attach it to the grid definition like that. Also, there is a very big difference between "on" and "after" scroll, please clarify which one you want. – gitsitgo Commented Jul 17, 2014 at 14:36

2 Answers 2

Hi got the same question today, and fixed it this way:

Attach the jQuery event .scroll() right after your Kendo Grid was initialized like:

$('#GridName .k-grid-content').scroll(function () { 
    alert('I am scrolling ...'); 
});

The above didn't work for me either, but led me along the correct lines. The k-virtual-scrollable-wrap class handles the the scrollable part of the grid (eg when you have frozen columns enabled), so try this code instead:

$('.k-virtual-scrollable-wrap').scroll(function () { 
    console.log("I am scrolling"); 
});