SelectMode.Multiple on mobile device

[Ivan Temelkov]

Hi,

in my Blazor Server Web App I have the following setup:

<SfListBox TValue="string[]"
           DataSource="@GridData"
           TItem="MyModel"
           Value="SelectedItemIds"
           ValueChanged="SelectedItemIdsChanged"
           AllowFiltering="true"
           FilterType="FilterType.Contains">
            <ListBoxSelectionSettings Mode="SelectionMode.Multiple" />
            <ListBoxFieldSettings Value="@nameof(MyModel.Id)" Text="@nameof(MyModel.FilterText)" />

            <ListBoxTemplates TItem="ViewFillGridModel">
                <ItemTemplate>
                    <div class="item-container">
                        ....
                    </div>
                </ItemTemplate>
            </ListBoxTemplates>
</SfListBox>

I prefer not to use a Check Box for the selection.

On my desktop machine using Ctrl+Click the selection works even though I would like to have the option to select also without clicking Ctrl.

My question is, how can I select multiple items on a mobile device? (Tip: Ctrl is not available)

Thank you in advance for your support!

Best regards,

Ivan

[YuvanShankar Arunagiri]

Hi Ivan,

We have reviewed your request and prepared a sample code based on your requirements. To customize the selection of the listbox, you can use the SelectItemsAsync method. Here is the relevant code snippet for your reference:

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_SelectItemsAsync__1___0_System_Boolean_

<SfListBox @ref="listObj" TValue="string[]" DataSource="@Vehicles" TItem="VehicleData" AllowFiltering="true"

           FilterType="FilterType.Contains" @ondblclick="OnDobClick" @onclick="OnSelect">

    <ListBoxFieldSettings Text="Text" Value="Id" />

    <ListBoxTemplates TItem="VehicleData">

        <ItemTemplate>

            <div>@context.Text</div>

        </ItemTemplate>

    </ListBoxTemplates>

</SfListBox>

…………………….

private async Task OnDobClick()

    {

        EnableMultiSelect = !EnableMultiSelect;

        if(EnableMultiSelect) {

            Items.Add(listObj.Value[0]);

        }

        else

        {

            await listObj.SelectItemsAsync(Items.ToArray(), false);

            Items.Clear();

        }

    }

 

    private async Task OnSelect()

    {

        if(EnableMultiSelect)

        {

            if (!Items.Contains(listObj.Value[0]))

            {

                Items.Add(listObj.Value[0]);

                await listObj.SelectItemsAsync(Items.ToArray(), true);

            }

            else if (Items.Contains(listObj.Value[0]))

            {

                Items.Remove(listObj.Value[0]);

                await listObj.SelectItemsAsync(Items.ToArray(), true);

            }

        }

    }

In the above code snippet, we have enabled the multi-select option by double-clicking on the listbox. Once you double-click on it, then for every single click, the list item will be selected. Again, when you double-click on the listbox, we disable the multi-select option and the default behavior will occur.

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: Counter_f2c20af0.zip

[Ivan Temelkov]

Hi,

thank you for your reply!

Please note that my main question was about using the ListBox on a mobile device where the multi-selection is not possible at all with the component's default behavior.

Yes, I already added some code in order to accomplish my task, but this cannot be a definitive solution.

One expects that a component library should work without extra code.

Best regards,

Ivan

[YuvanShankar Arunagiri]

Sorry for delay, Ivan.

Currently we do not have multi selection support in mobile device of list box. So, we confirmed this as an issue and logged a bug report. The fix will be available in our upcoming SP 1 release planned for end of the January 2023.

Feedback link for tracking purpose: https://www.syncfusion.com/feedback/40334/provide-the-multiple-selection-support-to-listbox-in-mobile-device

You will be informed regarding this once the fix is published.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

[YuvanShankar Arunagiri]

Sorry for delay, Ivan.

We are glad to announce our weekly patch release (20.4.0.50) is rolled out. We have included the fix for this “Provide the multiple selection support to list box in mobile device” issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue in your end. (20.4.0.50).

Feedback link: https://www.syncfusion.com/feedback/40334/provide-the-multiple-selection-support-to-listbox-in-mobile-device

For performing a multi-selection on a mobile device, first hold on a list item, then select any list item using a touch action, and it will multiple-select. And if we deselect the list item and hold on to it again, it will deselect all list items and single selection will work. Kindly refer to the attached video demonstration.

Attachment: listboxmultiselection_3574eda8.zip

[Ivan Temelkov]

Hi!

as I said earlier I already implemented the mentioned functionality more than a month ago.

I will continue to keep my solution because in my opinion it is more user friendly.

The take away is that lately I depend less on the Syncfusion Component Library because i find it unreliable for mobile device projects.

Best regards,

Ivan Temelkov

[YuvanShankar Arunagiri]

Sorry for the inconvenience, Ivan.

We understand that you have chosen to use your solution. We intend to identify and address any control deficiencies that may exist in all our components in the mobile devices. Please let us know if you have any other concerns about our components.