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
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
0
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
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
​I get a javascript error when the script is executed
Thoughts or ideas
Thanks Troy
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
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:
Hope this will help you solve the issue.
Regards,
Plamen
Telerik
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.