Scroll to the selecteditem in listbox

[Laslo Pertic]

Hi,

I have a case where I need to find an item in a RadListBox, select it and display the item in the visible area (like scrolltop=...)
How can I scroll to the selected item in a RadListBox so that the item is displayed in the visible area on server side?
I found an example for the grid but is it possible for the listbox?

Thanks,
Laslo

[Shinu]

Hi Laslo,

I tried the following client-side code for scrolling to the selecteditem in the RadListBox.

javscript:

<script type="text/javascript">
    function scroll() {
        var listbox = $find("<%= RadListBox1.ClientID %>");
        var item = listbox.get_selectedItem();
        item.scrollIntoView();
    }
</script>

This client function can be invoked from code behind on the required server event.

-Shinu.

[jfkrueger]

That's great but what if the listbox is inside of an edit template in a RadGrid?

[Genady Sergeev]

Hello Joe,

 You can easily obtain reference to a RadListBox that is inside a template the following way:

1) Declare global variable like this: var listBox
2) Hook on the client side load event of your RadListBox. Once there apply the following code:

function onClientLoaded(sender) {
    listBox = sender;
}

3) Then use the listbox as Shinu described.

More information on the topic can be found here.

Kind regards,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[jfkrueger]

Ok, so why didn't I think of that? lol, great idea, thanks!

This client function can be invoked from code behind on the required server event."

It is calling the scroll method BEFORE the listBox variable is set. The listboxes are inside of the GridEditForm and when the form pops up I run code to select the appropriate items and I want the listboxes to be scrolled to the first (or only) selected item when the edit form pops up.

Here is how I am invoking the client code:

Private Sub RadGridLinks_EditCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGridLinks.EditCommand

    ScriptManager.RegisterStartupScript(Page, GetType(Page), "SelectListBoxItems", "scrollGroupsToSelected();", True)
    ScriptManager.RegisterStartupScript(Page, GetType(Page), "SelectListBoxItems", "scrollDivisionsToSelected();", True)

End Sub

And here is all of my client code:

<script type="text/javascript" language="javascript">

    var groupsListBox;
    var divisionsListBox;

    function RadListBoxGroups_onClientLoaded(sender) {

        groupsListBox = sender;
        alert('groups');

    }

    function RadListBoxDivisions_onClientLoaded(sender) {

        divisionsListBox = sender;
        alert('divisions');


    }

    function scrollGroupsToSelected() {

        var item = groupsListBox.get_selectedItem();
        item.scrollIntoView();

    }

    function scrollDivisionsToSelected() {

        var item = divisionsListBox.get_selectedItem();
        item.scrollIntoView();

    }


</script>

Once again, I am manually selecting the appropriate ListBox items in the Grid_ItemDataBound event.

When I run it I get a script error telling me that groupsListBox is null or not an object and then when I continue the alerts pop up that are in the two scroll methods, so obviously it is calling the methods before the variables are getting set. What am I doing wrong?

Thanks!

[Genady Sergeev]

Hello Joe,

The correct way to workaround this issue is to add a handler for the clientSide onClientSelectedIndexChanged event. It will fire after the listBox variable is set, once you change the selection. Example code:

function selectedIndexChanged(sender, args)
{
    var item = args.get_item();
    item.scrollIntoView();
}

Best wishes,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[jfkrueger]

I can an "Object doesn't support this property or method" error on this line:

var item = args.get_item();

Here is my RadListBox (Inside an EditFormTemplate in a RadGrid):

<telerik:RadListBox ID="RadListBoxGroups" runat="server"
    DataSourceID="ObjectDataSourceGroups" DataValueField="groupNumber"
    DataTextField="NameAndNumber" Height="150px" Width="250px" SelectionMode="Multiple"
    OnSelectedIndexChanged="RadListBoxGroups_SelectedIndexChanged" AutoPostBack="true"
    CausesValidation="false"
    OnClientSelectedIndexChanged="scrollToSelected">

    
Javascript is exactly as in your post...

[Veselin Vasilev]

Hello Joe,

Please paste here the code of the scrollToSelected method.

Greetings,
Veskoni
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[jfkrueger]

function scrollToSelected(sender, args)

{

    var item = args.get_item();

    item.scrollIntoView();

}

[Genady Sergeev]

Hello Joe,

We are not able to reproduce the problem on our side. I am attaching the problem we have tested on. Can you confirm that there is error when running the sample?


All the best,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.