scroll down ListView on start

is there a way to scroll the list at the bottom right from the opening?

or, even better, in a particular item?


thank you


4 Replies 1 reply marked as answer

KR Keerthana Rajendran Syncfusion Team July 21, 2021 11:47 AM UTC

Hi Marco, 
 
Thanks for contacting Syncfusion support. 
 
We checked your query and suspect that you would like to scroll down to the last item of the ListView during initial rendering. If so, this can be achieved by using scrollIntoView() in actionComplete event of ListView component. 
 
Refer to the following code. 
 
<div class="col-lg-6"> 
   <ejs-listview enable="true" id="listview" dataSource="ViewBag.dataSource" height="300px" actionComplete="onComplete">  
         </ejs-listview> 
        </div> 
<script> 
    function onComplete(args) { 
        document.querySelector('[data-uid="' + args.data[args.data.length - 1].id + '"]').scrollIntoView(); 
        // move the scroller to last item during initial rendering 
    } 
</script> 
 
We have attached a sample for your reference in the following link. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Keerthana R. 



MS Marco Salvatori July 21, 2021 02:21 PM UTC

I have a template like your chat example.

I have data-uid with random values like data-uid = "3de6".

how can i solve?



MS Marco Salvatori July 21, 2021 02:38 PM UTC

i resolve like this

i added an id in the div setting

<div class='settings' id="datauid${Idnota}">

.....

.....

<div/>


then, i call

document.querySelector('[id=datauid' + args.data[args.data.length - 1].Idnota + ']').scrollIntoView();


it seem work fine.


it's good idea?



KR Keerthana Rajendran Syncfusion Team July 22, 2021 06:22 AM UTC

Hi Marco, 
 
Yes, you can invoke the scrollIntoView method from required element(similar to your code) based on your use case scenario. 
 
Please get back to us if you need any further assistance.  
 
Regards,  
Keerthana R.  


Marked as answer
Loader.
Up arrow icon