how we Scroll to the selecteditem in radlistbox

[M Kumar]

hi,

             i want to scroll down to the select item in radlistbox

             I search the particular word in text box and click the search button , in  button click the we change the color but automatically scroll down not work. i need scroll down automatically to the particular string.

 

I send the screenshot

 

http://prntscr.com/odyyh6

 

http://prntscr.com/odyz8x

[M Kumar]

hi ,

 

            Attach my project

 

 

[Attila Antal]

Hello,

I have removed the attached project as it contained Commercial version of Telerik assemblies. Please note that sharing commercial assemblies has legal consequences, and so I advise excluding those from the attachments in the future.

Selecting a ListBoxItem can be done both on server and client side, however, scrolling to View can only be done on client-side by using the scrollIntoView() method of the RadListBoxItem Object.

Example markup:

<telerik:RadButton ID="RadButton1" runat="server" Text="Search" AutoPostBack="false" OnClientClicked="OnClientClicked"></telerik:RadButton>
<telerik:RadTextBox ID="RadTextBox1" runat="server"></telerik:RadTextBox>
<br />

<telerik:RadListBox ID="RadListBox1" runat="server" Height="100px" OnLoad="RadListBox1_Load">
</telerik:RadListBox>

JavaScript:

<script type="text/javascript">
    function OnClientClicked(sender, args) {
        var textBox = $find("<%= RadTextBox1.ClientID %>");
        var listBox = $find("<%= RadListBox1.ClientID %>");

        var listBoxItem = listBox.findItemByText(textBox.get_textBoxValue());

        if (listBoxItem) {
            listBoxItem.select(); // select the item
            listBoxItem.scrollIntoView(); // scroll to the item directly
        }
    }
</script>

Kind regards,
Attila Antal
Progress Telerik

[M Kumar]

Hi,

                Thanks for u r reply,

            The above code is work but it scroll but not select correct search word from textbox it show pervoius item.

 

i send the sample project

https://www.dropbox.com/s/0pagmomm23ugfys/radlistboxtest1.rar?dl=0

 

[Attila Antal]

Hi,

When I ran the project with the old version of Telerik controls 2017.2.711.40 my solution also did not work. We recommend that you update the Telerik Assemblies to the latest one and get the benefit of new features, controls and fixes that we have released over the past years.

For the older version of Telerik, you can try to change the JavaScript to the following. See marked with yellow:

<script type="text/javascript">
    function OnClientClicked(sender, args) {
        var textBox = $find("<%= RadTextBox1.ClientID %>");
    var listBox = $find("<%= RadListBox1.ClientID %>");

    var listBoxItem = listBox.findItemByText(textBox.get_textBoxValue());

    if (listBoxItem) {
        listBoxItem.select(); // select the item
        listBoxItem.get_element().scrollIntoView(); // scroll to the item directly
    }
}
</script>

If the issue still persist, I advise you open a formal support ticket where our colleagues will help you debug the application.

Kind regards,
Attila Antal
Progress Telerik