MultiSelect Dropdown error when scrolling down

[Francisco Fernandes]

Hello,

I have detected bugs (white space at the end) when I scroll down completely using the multiselect dropdown component. Below is a sample with the corresponding error.

Sample: https://blazorplayground.syncfusion.com/htVyZytcVRgVbAKX

[Yohapuja Selvakumaran]

Hi Fernandes,

Thank you for reaching out to us.

We have reviewed your scenario. We suspect the current service implementation might not be correctly handling the skip and take parameters on the server side. When using virtualization, it’s essential that the backend logic dynamically calculates and returns the correct chunk of data based on the skip and take values sent by the component.

To achieve proper data loading with virtualization in the MultiSelect component, we recommend using the DataSource property directly with your local data collection instead of using a custom adaptor. This approach ensures that virtualization and filtering work seamlessly without the need for additional configuration.

Code snippet:

 

<SfMultiSelect @ref="@MultiSelectRef"

               TItem="SecurityRequirement"

               TValue="List<int>"

               @bind-Value="@SelectedValues"

               Placeholder="Select security requirements"

               CssClass="e-outline"

               AllowFiltering="true"

               Mode="VisualMode.CheckBox"

               ShowSelectAll="true"

               ShowDropDownIcon="true"

               FilterBarPlaceholder="Filter items..."

               EnableVirtualization="true"

               ShowClearButton="true"

               Query="@Query"

               DataSource="@JsonData"

               FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains">

    <MultiSelectFieldSettings Text="Name" Value="Id"></MultiSelectFieldSettings>

</SfMultiSelect>

 

 

Please find the sample below for your reference,

Sample: https://blazorplayground.syncfusion.com/embed/LDhStIZkzGKbgCEj?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

This implementation avoids the complexity of a custom adaptor and utilizes the built-in virtualization support effectively with local data.

Please let us know if you need any further assistance.

Regards,

Yohapuja S

[Francisco Fernandes]

Hi, thanks for the answer, but this won't work for our scenario.

In my understanding, if i use the Datasource, then i will have to be the one making the request to the api and fetch all the records in one request, and this is unthinkable for us, since we have tables with thousands of records.

What i want is to use the Datamanager so that it manages all of this logic for me. In the zip file you can see one of our endpoints and query, so that you can see that the pagination logic is being correctly applied in it:

Take into consideration that the pagination logic is working correctly, as it should. But, what is not working, is when we scroll to the bottom of the records, which just shows a blank space with no records.

The problem only seems to occur if you use Datamanager and scroll directly to the bottom of the records.

Attachment: Nova_pasta_f8855b09.zip

[Yohapuja Selvakumaran]

Hi Fernandes,

In virtualization scenarios, data is dynamically loaded based on the skip and take parameters, which play a crucial role in retrieving the correct subset of records during scrolling. After reviewing the service you’re using, we observed that these parameters may not be handled as expected. This could be the reason behind the improper data loading and the appearance of duplicate entries.

To ensure accurate and efficient data loading, it is important that the skip and take parameters are correctly implemented in your data service. Proper handling of these values ensures that only the required set of records is fetched during each scroll event, preventing any overlap or repetition.

  

For your convenience, you can refer to the below demo and documentation, the take parameter is consistently set to 30, ensuring that exactly 30 new records are retrieved with each scroll:

Demo: Blazor MultiSelect Dropdown Virtualization Example - Syncfusion Demos

Documentation: https://blazor.syncfusion.com/documentation/multiselect-dropdown/virtualization

If you still facing any issue, please share the runnable sample with backend for further validation at our end.

Regards,

Yohapuja S