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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

132797 Sep 21,2017 12:13 PM UTC Sep 25,2017 04:21 AM UTC ASP.NET MVC 3
loading
Tags: ListBox
Paul Kocher
Asked On September 21, 2017 12:13 PM UTC

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?



Buvana Sathasivam [Syncfusion]
Replied On 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.   
 


Paul Kocher
Replied On September 22, 2017 02:45 PM UTC

Hi Buvana,

that worked. Thanks a lot!


Buvana Sathasivam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;