Auto Scroll RadListBox

[Troy Clemons]

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

[Plamen]

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

[Troy Clemons]

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

[Plamen]

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