how we Scroll to the selecteditem in radlistbox

5 posts, 0 answers
  1. M Kumar
    M Kumar avatar
    77 posts
    Member since:
    Apr 2008

    Posted 12 Jul Link to this post

    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

  2. M Kumar
    M Kumar avatar
    77 posts
    Member since:
    Apr 2008

    Posted 12 Jul Link to this post

    hi ,

     

                Attach my project

     

     

  3. Attila Antal
    Admin
    Attila Antal avatar
    346 posts

    Posted 16 Jul Link to this post

    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.
  4. M Kumar
    M Kumar avatar
    77 posts
    Member since:
    Apr 2008

    Posted 18 Jul Link to this post

    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

     

  5. Attila Antal
    Admin
    Attila Antal avatar
    346 posts

    Posted 19 Jul Link to this post

    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.
Back to Top