How to scroll to the selected row in Kendo grid using jQuery?

Question

My question may be similar to,

and

    $("#button").click(function() {
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
     }, 2000);
    });

and I tried this also:

     this.element.find(".k-grid-content").animate({
     scrollTop: this.select().offset().top });
     }

But, the solution provided to above questions did help me, I have a problem with the fiddle link provided by 2nd link: http://jsfiddle.net/blackjim/9GCYE/5/

The solution works fine when I try to get the view of the row which is somewhere down in the table of rows. But, after that, (ie, after getting focus of one of the row from the bottom of the grid), when I try to select some row from the top, the control still rolls down, and thus the purpose of scroll function goes meaningless there.

I have a search box, in which I can type something that matches with the row data, and if it matches, scroll should be triggered, so that I get my selected row to the users view.

The code, in the solutions above is fine for this criteria. But, now, again, if I try to search for something that matches with some row in the top of the grid, the scroll isn't happening from bottom (previously selected row) to the newly slected row at the Top of the grid.

How am I to modify the above code to work to my need?

score 6 · Answer 1 · edited May 23 '17 at 11:53

The scrolling logic in the solution you used isn't complete, so the scrolling would only work sometimes. Furthermore, it does not scroll exactly to the top of the selected row. I have found a solution that scrolls accurately and reliably everytime. My onChangeSelection function looks like this:

function onChangeSelection(e) {
    //calculate scrollTop distance
    var scrollContentOffset = this.element.find("tbody").offset().top;
    var selectContentOffset = this.select().offset().top;
    var distance = selectContentOffset - scrollContentOffset;

    //animate our scroll
    this.element.find(".k-grid-content").animate({
        scrollTop: distance 
    }, 400);
}

This automatically scrolls so that the selected row is at the very top (first visible row) of the grid. I've also added the search logic you want, and it is able to search for items case insensitively. The search function looks something like this:

$("#searchbtn").click(function () {
    var searchval = $("#searchbox").val();
    //...unimportant code omitted
    var grid = $("#grid").data("kendoGrid");
    grid.select("tr:containsIgnoreCase('" + searchval + "')");
});

See the jsfiddle here.

Note:

scrollContentOffset grabs the true top height of the grid table body content (even if it's scrolled out of view (and this value can be negative)
distance is the true scroll distance of the scrollable content
I used containsIgnoreCase custom filtering from this solution

How to scroll to the selected row in Kendo grid using jQuery?

1 Answers1