Auto Scroll RadListBox

4 posts, 0 answers
  1. Troy Clemons
    Troy Clemons avatar
    69 posts
    Member since:
    Apr 2010

    Posted 27 Jan 2014 Link to this post

    I have a listbox data bound to a SQL Data Source. I have given the use the ability to Search within the listbox, I can
    find and select the item requested, but how do you make the listbox scroll to the selected item from code behind.


    Thanks.

    Troy
  2. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 30 Jan 2014 Link to this post

    Hello Troy,

    Thank you for contacting Telerik support.

    Such scroll into view is supported only from the client-side by using the scrollIntoView function of the RadListBoxItem. In such scenarios like yours you can set the select the node and then on load find the selected not from the client side and scroll it into view.

    Hope this information will be helpful. If you need further assistance with this issue please don't hesitate to contact us again.

    Regards,
    Plamen
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Troy Clemons
    Troy Clemons avatar
    69 posts
    Member since:
    Apr 2010

    Posted 30 Jan 2014 in reply to Plamen Link to this post

    Here is my Client Call to scroll to the found item
    function OnClientClickedSearch(sender, args) {
                var notification = $find("<%=RadNotification6.ClientID%>");
                //ScrollMe(sender, args);
                notification._close(true);
                var list = $find("<%= RadListBox1.ClientID %>");
                list.scrollIntoView();
            }

    ​I get a javascript error when the script is executed
    Unhandled exception at line 45, column 13 in http://localhost/SpecRec/default.aspx
     
    0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'scrollIntoView'

    Thoughts or ideas

    Thanks Troy








  5. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 04 Feb 2014 Link to this post

    Hi Troy,

    It looks like I could not describe quite well. scrollIntoView is a function of and item not of RadListbox so you have to select it first and then you can scroll to it as for example in the code below:
    <script type="text/javascript">
               function OnClientClicked(sender, args) {
                   var listbox = $find("<%=RadListBox1.ClientID %>");
                   listbox.get_selectedItem().scrollIntoView();
               }
           </script>
              <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="OnClientClicked">
           </telerik:RadButton>
           <telerik:RadListBox runat="server" ID="RadListBox1" Height="100px">
               <Items>
                   <telerik:RadListBoxItem Text="RadListBoxItem1" />
                   <telerik:RadListBoxItem Text="RadListBoxItem2" />
                   <telerik:RadListBoxItem Text="RadListBoxItem3" />
                   <telerik:RadListBoxItem Text="RadListBoxItem4" />
                   <telerik:RadListBoxItem Text="RadListBoxItem5" />
                   <telerik:RadListBoxItem Text="RadListBoxItem6" />
                   <telerik:RadListBoxItem Text="RadListBoxItem7" />
                   <telerik:RadListBoxItem Text="RadListBoxItem8" />
                   <telerik:RadListBoxItem Text="RadListBoxItem9" />
                   <telerik:RadListBoxItem Text="RadListBoxItem10" />
                   <telerik:RadListBoxItem Text="RadListBoxItem11" />
                   <telerik:RadListBoxItem Text="RadListBoxItem12" />
                   <telerik:RadListBoxItem Text="RadListBoxItem13" />
                   <telerik:RadListBoxItem Text="RadListBoxItem14" />
                   <telerik:RadListBoxItem Text="RadListBoxItem15" />
                   <telerik:RadListBoxItem Text="RadListBoxItem16" />
                   <telerik:RadListBoxItem Text="RadListBoxItem17" />
                   <telerik:RadListBoxItem Text="RadListBoxItem18" />
                   <telerik:RadListBoxItem Text="RadListBoxItem19" />
                   <telerik:RadListBoxItem Text="RadListBoxItem20" />
     
               </Items>
           </telerik:RadListBox>

    Hope this will help you solve the issue.

    Regards,
    Plamen
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top