Scroll to Show last 2 rows

3 posts, 0 answers
  1. Keivan Kechmiri
    Keivan Kechmiri avatar
    7 posts
    Member since:
    Aug 2009

    Posted 30 May 2011 Link to this post


    How can I scroll to always show the selected row second from bottom in the list. I'm currently using scrollIntoView to show the selected row, but is scrolls so that the selected row allways is the last visible, but I need to scroll to show one row extra.

    I also need the function get_isVisible to work with the same intention to show one row extra.

  2. Dimitar Terziev
    Dimitar Terziev avatar
    1266 posts

    Posted 02 Jun 2011 Link to this post

    Hello Keivan,

    The scrollIntoView client-side method puts a particular item at the bottom of the visible area. So what you experience is the default behavior when using this method.

    Could you clarify what exactly are your requirements, since I'm not quite sure what do you want to achieve.

    Do you want to select an item and then this item to be shown as second to last in the visible area?

    In case this is the desired scenario my suggestion is to subscribe on the client-side OnClientSelectedIndexChanged event and use the following implementation of the event handling function:
    <script type="text/javascript">
        function OnClientSelectedIndexChanged(sender, args) {
            var index = args.get_item().get_index();
            index = index + 1;
            setTimeout(function () { sender.get_items().getItem(index).scrollIntoView(); }, 0);

    I hope this would help you out.

    Dimitar Terziev
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. DevCraft R3 2016 release webinar banner
  4. Keivan Kechmiri
    Keivan Kechmiri avatar
    7 posts
    Member since:
    Aug 2009

    Posted 08 Jun 2011 Link to this post


    I'm trying to use the scrollIntoView to scroll so that one extra row allways show in a ListBox. I'm displaying a playlist (of music) and I mark current playing song by styling selected item and I allways want to show what the next song is in the playlist so I need the scrollIntoView to scroll the selected item to show one extra row.

    I also need the get_isVisible to also trigger when the the need of scrolling is true (showing one extra row).

    I've done it by taking a copy of both scrollIntoView & get_isVisible and modified them, but this might bee a good feature to have as standard, a optinal parameter passed to these function so adjust how many rows to "pad".

    Modified versions (fixed scroll one extra row):
    function get_isVisibleLastTwo(sender) {
        var listBox = sender.get_listBox();
        if (!listBox) return false;
        var scrollableElement = listBox.get_childListElement().parentNode;
        var top = sender.get_element().offsetTop*2;
        var bottom = top + sender.get_element().offsetHeight;
        return top >= scrollableElement.scrollTop && (bottom - scrollableElement.scrollTop) <= scrollableElement.offsetHeight;
    function scrollIntoViewLastTwo(sender) {
        var listBox = sender.get_listBox();
        if (!listBox) return;
        var scrollableElement = listBox.get_childListElement().parentNode;
        scrollableElement.scrollTop = sender.get_element().offsetTop + sender.get_element().offsetHeight*2 - scrollableElement.offsetHeight;
Back to Top