How to scroll the detail row of a Kendo Grid into view on select

I decided I liked the idea of only having one detail pane at a time in my web grid. It gets too cluttered having a number of them open. I got feedback from my users that when selecting a row towards the end of the screen, they had to then scroll to see all the details.

I did a simply time cost analysis and instead of changing the UI to show the data in a popup, it was faster and cheaper just to scroll down the page. Simple, eh.

Here is the script to do a scroll when a row is selected in the Kendo Grid to ensure the detail pane is visible.

  function engagementRowSelected(e) {

            var eventTarget = (event.target) ? $(event.target) : $(event.srcElement);

            var grid = $("#engagementsContainer").data("kendoGrid");
            var gridSource = grid.dataSource;
            var selectedRow = this.select()[0];

            var position = $(selectedRow).position();
            $(window).scrollTop(position.top);

        }

I left out all the code that does the selection, and forcing to display only one row at a time. If that is something people want to see or use, I can post that as a simple demo later.

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *