Blazor Listview adding items

[Michael Salzlechner]

I have a Listview that i am adding items to in a process. I always want the newest item to be visible.

So when there are more items in the list than fit on screen i want the list to scroll to the bottom to make sure the newest item is shown

how can I do that with the ListView?

thanks

[Sharon Sanchez Selvaraj]

Hi Michael, 

 

Greetings from Syncfusion Support. 

 

We have checked with your query and rendered a sample here for your reference. Here, we have set the height of the ListView and while adding items, the scroller would be added as per your requirement. You can customize the height based on your preference. 

 

Refer to the following sample attached for your reference. 

 

https://www.syncfusion.com/downloads/support/forum/165253/ze/ListView_F1652531404574820.zip 

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

[Michael Salzlechner]

thanks for the response but I may not have expressed this properly

any time i add an item to the listview it is added to the bottom of the listview

when the items fill the visible part of the listview a scrollbar is shown but the item is added at the bottom and not visible to the user until the user manually scrolls to the bottom

i want to add an item and then programmatically scroll the list to the bottom so the newly added  item is visible to the user

[Sharon Sanchez Selvaraj]

Hi Michael, 

 

We checked your query and created a sample here for your reference. 

 

Refer to the script code from where the scroller would be programmatically scrolled down to the last item when we add a new item to ListView. 

 

Host.cshtml 

 

<script> 

        function ListView(args) { 

             

            setTimeout(function () { 

                document.querySelector('[data-uid="' + args.id + '"]').scrollIntoView(); 

            },20); 

        } 

    </script> 

 

Index page: Adding item to the ListView on Button click. 

 

async Task AddItem() 

    { 

 

        var random = new Random(); 

        DataSource.Add(new ListDataModel 

        { 

            Id = random.Next(100, 300).ToString(), 

            Text = "Item " + random.Next(100, 300).ToString(), 

        }); 

        var item = DataSource[DataSource.Count - 1]; 

        await jsRuntime.InvokeAsync<string>("ListView", item); 

    } 

 

Refer to the modified sample attached here for your reference. 

 

https://www.syncfusion.com/downloads/support/forum/165253/ze/ListView_Forum1652531559728833.zip 

 

Please get back to us If you need further assistance. 

 

Regards, 

 

Sharon Sanchez S.