1. Home
  2. Forum
  3. Blazor
  4. listview with initial scroll down

listview with initial scroll down

I create chat for users of my web-site and going to use listview with virtualization option to show not only the last, but all previous messages, which I save in database.

Please, decribe how to show listview scrolled down to last messages; and how to load and show previous on scroll up only?

9 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team August 31, 2020 12:42 PM UTC

Hi Stanislav Gordenko, 
 
Currently, we are preparing a sample based on your requirement. We will update the details shortly. 
 
Regards,  
Sowmiya.P 
  


SP Sowmiya Padmanaban Syncfusion Team August 31, 2020 02:27 PM UTC

Hi Stanislav Gordenko,  
 
Greetings from Syncfusion support. 
 
Currently, we have not provided support to move the scrollbar position to any list item position in ListView. When enabling the virtualization property, full data source will not be render in the DOM on initial loading. This is the default behaviour of ListView component. Minimal list items will be rendered in DOM, and only on scroll the new list items will replace the old items, which was already present in the ListView based on its height. Due to this behavior, we cannot identify the last element of ListView component with Virtualization functionality. 
 
We suggest you to use the below workaround for your requirement. Disable the virtualization property to render all list items of data source in DOM, then you can identify the last item of the list and move the scrollbar to the last item by using JS interop. 
 
Refer the below code snippet. 
 
public void Click() 
    { 
        var item = Data[Data.Count - 1]; 
        // call the JS function to move the scroller position. 
        JSRuntime.InvokeAsync<string>("ListView", item); 
    } 
Host.cshtml 
  
<script> 
        function ListView(args) { 
            // move the scroller to correspoding element by using scrollintoview method. 
            document.querySelector('[data-uid="' + args.id + '"]').scrollIntoView(); 
        } 
    </script> 
 
Refer the sample link below. 
 
 
Refer the below documentation link for chat window using ListView component. 
 
 
To know more about the ListView component, refer the below links. 
 
 
 
 
Please let us know, if you need an further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
SG Stanislav Gordenko August 31, 2020 07:48 PM UTC

Thank you for this nice idea, I have tried it and it works well. The only one detail is that I should scroll the list not by button click but just after listview is created and became visible.
I tried to find some event like OnCreate, but ListView have not it. Please, describe, which event to use. If it should be OnActionComplete, write how I should choose the right action.

MK Muthukrishnan Kandasamy Syncfusion Team September 1, 2020 05:40 AM UTC

 
Hi Stanislav, 
 
Thanks for the update. 
 
Since the Syncfusion Blazor ListView component does not have created event, you can use the Blazor life cycle event OnAfterRender to meet your requirement. Please refer to the below code block. 
 
protected override void OnAfterRender(bool firstRender) 
    { 
        if (firstRender) 
        { 
            var item = Data[Data.Count - 1]; 
            // call the JS function to move the scroller position. 
            JSRuntime.InvokeAsync<string>("ListView", item); 
        } 
    } 
 
We have modified the sample, which can be downloaded from the below link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


SG Stanislav Gordenko September 1, 2020 05:52 AM UTC

My chat component placed in separate dialog, so OnFirstRender event will not work - this dialog is not opened yet. Anyway, I will check OnCreate event of dialog.

SG Stanislav Gordenko September 1, 2020 06:03 AM UTC

I have tried already Dialog Created and OnOpened events, but have failed. If you have any ideas, please, write.

SP Sowmiya Padmanaban Syncfusion Team September 2, 2020 07:37 AM UTC

Hi Stanislav Gordenko,  
 
Dialog OnOpen event is triggered before the Dialog is opened on the UI. To achieve your requirement, we suggest you to use the Opened event of Dialog component. Refer the below code snippet. 
 
<SfDialog Width="250px"  IsModal="true" @bind-Visible="@IsVisible" ShowCloseIcon="true"> 
    <DialogEvents Opened="open"> 
    </DialogEvents> 
    <DialogTemplates> 
        <Content> 
            <SfListView ID="listview" DataSource="@Data" ShowCheckBox="true" @ref="@list" Height="200px"> 
               
                <ListViewFieldSettings Id="Id" Text="Text" IsChecked="isChecked"></ListViewFieldSettings> 
            </SfListView> 
        </Content> 
    </DialogTemplates> 
</SfDialog> 
    public void open(Object args) 
    { 
        var item = Data[Data.Count - 1]; 
        // call the JS function to move the scroller position. 
        JSRuntime.InvokeAsync<string>("ListView", item); 
    } 
 
Refer the sample link below. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


BL Blazor August 23, 2024 03:41 PM UTC

Hi ,
Are there provided support to move the scrollbar position now?

Or javascript call still only way ?
Thanks


LD LeoLavanya Dhanaraj Syncfusion Team August 27, 2024 05:47 PM UTC

Hi,


As mentioned earlier, we do not have a direct method to programmatically scroll to a specific item in the ListView component with virtualization support. The User Interface (UI) virtualization only loads the list items that are visible within the viewport and the DOM. Therefore, when using virtualization support, it is not possible to access or view items that are not currently loaded. This limitation exists in our component. Please refer to the link below for more information about the virtualization limitations in the ListView component.


https://blazor.syncfusion.com/documentation/listview/virtualization#limitations-for-virtualization


Note: If you are not utilizing virtualization support, you can achieve your desired result by using the scrollIntoView method and passing the corresponding list item ID(With the help of interop call).


Regards,

Leo Lavanya Dhanaraj


Loader.
Up arrow icon