This is a migrated thread and some comments may be shown as answers.

Auto Scroll RadListBox

3 Answers 180 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Troy Clemons
Top achievements
Rank 1
Troy Clemons asked on 27 Jan 2014, 12:53 PM
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

3 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 30 Jan 2014, 07:47 AM
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.
0
Troy Clemons
Top achievements
Rank 1
answered on 30 Jan 2014, 01:49 PM
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








0
Plamen
Telerik team
answered on 04 Feb 2014, 01:23 PM
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.
Tags
ListBox
Asked by
Troy Clemons
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Troy Clemons
Top achievements
Rank 1
Share this question
or