We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Is it possible to scroll to the position of a selected element?

Hi!

I have a ListBox where when I add a new item it automatically gets selected. While this isn't a problem when it's in the visible area of the ListBox.

What I would like to do is that if I add an item e.g. beginning with a "z" it is out of the visible area. I'd like to be able to scroll down to the selected item.

Is this possible?



3 Replies

BS Buvana Sathasivam Syncfusion Team September 22, 2017 11:47 AM UTC

Hi Paul,   
  
Thanks for using Syncfusion Products.   
  
Query #1: “I have a ListBox where when I add a new item it automatically gets selected.”   
  
We tried to reproduce the reported scenario, but we were unable to reproduce the issue.  In our list box control, you can add new items using addItem public method.  But, it will not automatically select the newly added item.  If you wish to select items automatically when add a new item, then you need to use selection public method for selecting a newly added item.  Please refer to the following code.   
  
ListBoxFeatures.cshtml   
   
<script type="text/javascript">   
function onClick(args) {   
        var obj = $("#selectbike").ejListBox("instance");   
        obj.addItem("Zone" + i);   
        $('#selectbike').ejListBox("selectItemByText""Zone" + i);   
        i++;   
  }   
</script>   
  
  
  
Please use the above playground to reproduce your issue and if possible please share us the code snippets of the page you were using or else please share the proper replication procedure.  This information will be helpful for us to analyze further on the issue and to provide a solution.   
   
Query #2: “What I would like to do is that if I add an item e.g. beginning with a "z" it is out of the visible area. I'd like to be able to scroll down to the selected item.”   
   
If you wish to scroll down to the selected item, you can use getSelectedItems public method for getting selected items and visible to select item by using scrollIntoView() method.  We have created a simple listbox sample.  If you click add button, then add new item to the list box control using addItem public method and then select newly added item by using selectItemByText and scroll into selected item by using scrollIntoView() method.  Please refer to the following code.   
   
ListBoxFeatures.cshtml   
   
<script type="text/javascript">   
    var i = 0;   
    function onClick(args) {   
        var obj = $("#selectbike").ejListBox("instance");   
        ………   
        obj.listItemsElement[obj.getSelectedItems()[0].index].scrollIntoView() // Get list items element of selected item and then called scrollIntoView method   
    }   
</script>   
   
   
   
   


  
Regards,   
Buvana S.   
 



PK Paul Kocher September 22, 2017 02:45 PM UTC

Hi Buvana,

that worked. Thanks a lot!



BS Buvana Sathasivam Syncfusion Team September 25, 2017 04:21 AM UTC

Hi Paul, 
 
We are glad to know that your problem is solved.  Please let us know if you need any assistances, we would be happy to assist you.        
    

Regards, 
Buvana S. 


Loader.
Up arrow icon