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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 07:47 AM

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 10:45 AM

Hi Buvana,

that worked. Thanks a lot!


Buvana Sathasivam [Syncfusion]
Replied On September 25, 2017 12:21 AM

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.

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.

;