Scroll to Show last 2 rows

[Keivan Kechmiri]

Hi

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.

/Keivan

[Dimitar Terziev]

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

    }
</script>

I hope this would help you out.

Greetings,
Dimitar Terziev
the Telerik team

[Keivan Kechmiri]

Hi

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