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. Image for the cookie policy date
close icon

Suitable component for infinite scrolling, loading more and grouping

Hi there,

I came from a xamarin forms background and we used your SfListView alot and it cover all our needs.

But when we started our blazor application we noticed that there is a lot of differences between SfListView for Xamarin forms and Blazor ListView and we also noticed you have other listing controls like ListBox.

So we are looking for a control that can cover all these features together

  1.  Can provide custom styles or templates for both selected and unselected states
  2. Implementing infinite scrolling with load more events when reach certain threshold
  3. Have selection events so I can select single or multiple items
  4. Group items together and have custom group header

Thanks very much

7 Replies

IL Indhumathy Loganathan Syncfusion Team October 18, 2022 09:26 AM

Hi Mahmoud,


Greetings from Syncfusion support.


Query 1: Can provide custom styles or templates for both selected and unselected states.


You can use the corresponding CSS selector values to customize the TreeView node selection styles. Check the below link to find the corresponding classes.


https://blazor.syncfusion.com/documentation/listview/style#customizing-selected-item-of-listview-control


Query 2: Implementing infinite scrolling with load more events when reach certain threshold.


In Blazor ListView, we have virtualization support which will loads only viewable list items in a view port, which will improve the ListView performance while loading a large number of data. Check the below link for reference.


https://blazor.syncfusion.com/documentation/listview/virtualization


Query 3: Have selection events so I can select single or multiple items.


We have Clicked event, which will trigger on list item click. You can refer to the below documentation links to know more details.


https://blazor.syncfusion.com/documentation/listview/how-to/trace-events-of-listview


https://blazor.syncfusion.com/documentation/listview/how-to/fetch-selected-items-from-listview-template-sample


Query 4: Group items together and have custom group header.


The ListView supports to wrap the nested element into a group based on the category. The category of each list item can be mapped with GroupBy field in the data table, that also supports single-level navigation. Check the below documentation.


https://blazor.syncfusion.com/documentation/listview/grouping


Please check the shared details and get back to us if you need any further assistance.


Regards,

Indhumathy L



MA mahmoud October 20, 2022 04:17 AM

Thanks for your reply,

but we still facing some issues I'll mention it below


Query 1

You can use the corresponding CSS selector values to customize the TreeView node selection styles. Check the below link to find the corresponding classes.

Yes we did and didn't work for us. I'll attach a code sample please have a look at it


Query 2

In Blazor ListView, we have virtualization support which will loads only viewable list items in a view port, which will improve the ListView performance while loading a large number of data. Check the below link for reference.

I'm aware of this feature but I still need an event or callback in order to load more. We prepare the code sample so you can edit it and show us your suggessions in order to load more items automatically when you reach the end of the list


Query 3

We have Clicked event, which will trigger on list item click. You can refer to the below documentation links to know more details.

The click event seems to have a bug and not working, pelase check the code sample attached.


Query 4

The ListView supports to wrap the nested element into a group based on the category. The category of each list item can be mapped with GroupBy field in the data table, that also supports single-level navigation. Check the below documentation.

Checked and working properly


Thanks very much


Attachment: TestingSyncfusionListView_678910d0.zip


LD LeoLavanya Dhanaraj Syncfusion Team October 21, 2022 11:14 AM

Hi Mahmoud,


Thanks for the shared details.


Query 1 : Can provide custom styles or templates for both selected and unselected states.


You can customize the list items by adding a CssClass property to the component to enable styles. Using the cssClass property you can be able to override the ListView component styles. Check the below code snippet and our screenshot for your reference.


[Index.razor]

<SfListView @ref="listview" DataSource="@_observableCollection" CssClass="customList">…

</SfListView>

 

<style>

    …

    .customList .e-list-item.e-focused {

        color: #2fa1ff;

        background-color: rgb(0, 15, 100);

    }

</style>



Query 2 : Need an event or callback in order to load more


We were not clear about your requirements. We would like to confirm whether you need any event call backs or any methods after the number of data’s are loaded. Please check the below documentation link. Here, we have added the OnActionBegin and onActionComplete events for the ListView component.


https://blazor.syncfusion.com/documentation/listview/how-to/trace-events-of-listview


Query 3: Have selection events so I can select single or multiple items.


We have validated your reported query in the Blazor ListView component. But we were not able to replicate the reported issue at our end. The ListView Clicked event triggered when the list item is clicked and we have properly got the clicked list item details at our end. Please once check our shared sample and if the issue still persists, please replicate the issue in our shared sample.



Query 4: Group items together and have custom group header.


We are glad that your reported query has been resolved.


Check the attached sample and output screenshots. Please get back to us if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj


Attachment: SfListView_930ec7a4.zip


MA mahmoud October 23, 2022 05:50 PM

Hi,

regarding your attached sample. I downloaded the sample -> build -> run and it gives me the same results I reported before. even when testing with different machines.

Attached video sample please have a look at it.


Query 2 : Need an event or callback in order to load more

I need to detect when the user reachs the end of the list so I can automatically fetch new data and append it to the list data source. do you have such an event in the ListView ?


Thanks


Attachment: List.mp4_6f33c47a.zip


LD LeoLavanya Dhanaraj Syncfusion Team October 27, 2022 10:24 AM

Hi Mahmoud,


Thanks for your patience.


Query 1 : Sample does not work.


We have validated your issue with the Blazor ListView component. We suspect that the issue occurs due to the improper script and style references added to the sample. In our release version 20.1.47, we have included some of the breaking changes. So, install the most recent individual NuGet package and include script and style references in your sample.


Please check the below release notes for changes.


Release notes link(Breaking changes) : https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#common


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListView696091291.zip


For your reference, we have attached the video footage and runnable sample with the latest version(V20.3.52).


Query 2: Need an event or callback in order to load more


Currently, we don’t have a direct event or a method to identify the end of list items when scrolling in the Blazor ListView component. We have discussed a similar case in the below mentioned link. Please check the below mentioned KB link.


KB link : https://www.syncfusion.com/kb/7522/how-to-identify-when-end-of-the-list-is-reached-on-scrolling-in-listview


Follow the suggested way as mentioned in the KB documentation and get back to us if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj



MA mahmoud October 30, 2022 03:50 AM

Hello,

Query 1 Sample does not work

Thanks, the last sample you provide is working fine now


Query 2 Need an event or callback in order to load more

KB link : https://www.syncfusion.com/kb/7522/how-to-identify-when-end-of-the-list-is-reached-on-scrolling-in-listview  


This is a Xamarin.Forms KB, I don't understand how should I use it with the Blazor SfListView, if it wasn't sent by mistake would you please explain with a working sample.


Thanks



LD LeoLavanya Dhanaraj Syncfusion Team October 31, 2022 11:30 AM

Hi Mahmoud,


Sorry for the inconvenience. Currently, we don’t have a direct event or a method to identify the end of list items in the ListView component.


Regards,

Leo Lavanya Dhanaraj


Loader.
Live Chat Icon For mobile
Up arrow icon