Suitable component for infinite scrolling, loading more and grouping

[mahmoud]

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

[Indhumathy Loganathan]

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

[mahmoud]

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

[LeoLavanya Dhanaraj]

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

[mahmoud]

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

[LeoLavanya Dhanaraj]

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

[mahmoud]

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

[LeoLavanya Dhanaraj]

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