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

how we Scroll to the selecteditem in radlistbox

4 Answers 183 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
M Kumar
Top achievements
Rank 1
Iron
Veteran
M Kumar asked on 12 Jul 2019, 07:33 AM

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

4 Answers, 1 is accepted

Sort by
0
M Kumar
Top achievements
Rank 1
Iron
Veteran
answered on 12 Jul 2019, 09:12 AM

hi ,

 

            Attach my project

 

 

0
Attila Antal
Telerik team
answered on 16 Jul 2019, 03:04 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
M Kumar
Top achievements
Rank 1
Iron
Veteran
answered on 18 Jul 2019, 07:03 AM

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

 

0
Attila Antal
Telerik team
answered on 19 Jul 2019, 03:26 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ListBox
Asked by
M Kumar
Top achievements
Rank 1
Iron
Veteran
Answers by
M Kumar
Top achievements
Rank 1
Iron
Veteran
Attila Antal
Telerik team
Share this question
or