Scroll to the selecteditem in listbox

10 posts, 0 answers
  1. Laslo Pertic
    Laslo Pertic avatar
    3 posts
    Member since:
    Aug 2009

    Posted 09 Dec 2009 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Dec 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jfkrueger
    jfkrueger avatar
    269 posts
    Member since:
    Jul 2012

    Posted 11 Dec 2009 Link to this post

    That's great but what if the listbox is inside of an edit template in a RadGrid?
  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 14 Dec 2009 Link to this post

    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.
  6. jfkrueger
    jfkrueger avatar
    269 posts
    Member since:
    Jul 2012

    Posted 16 Dec 2009 Link to this post

    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 ObjectByVal 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!
  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 18 Dec 2009 Link to this post

    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.
  8. jfkrueger
    jfkrueger avatar
    269 posts
    Member since:
    Jul 2012

    Posted 21 Dec 2009 Link to this post

    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...
  9. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 22 Dec 2009 Link to this post

    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.
  10. jfkrueger
    jfkrueger avatar
    269 posts
    Member since:
    Jul 2012

    Posted 22 Dec 2009 Link to this post

    function scrollToSelected(sender, args)
    {
        var item = args.get_item();
        item.scrollIntoView();
    }
  11. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 24 Dec 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017