Set maximum capacity of RHS listbox in dual listbox

[Greg Slasor]

Hi there,

I'm using a dual listbox per the documentation (https://blazor.syncfusion.com/documentation/listbox/dual-listbox/). I am using the toolbar to move items to/from.

I would like the user to make selections from the source listbox, but I want to limit the number of selections they can make (So the user selects items from the first listbox and moves them to the second, but can only move N items). Is there a way to do this? It doesn't look like this functionality is built in. I tried attaching to the OnActionBegin method like so :

        public void OnSourceActionBegin(ActionBeginEventArgs actionBeginEventArgs)

        {

            if (!string.IsNullOrEmpty(actionBeginEventArgs.EventName) && (actionBeginEventArgs.EventName.Equals("moveTo") || actionBeginEventArgs.EventName.Equals("moveAllTo")))

            {

                var selections = JsonConvert.DeserializeObject>>(actionBeginEventArgs.Items.ToString());

                if (selections.Count + SelectedItems.Count > MaximumSelections)

                {

                    actionBeginEventArgs.Cancel = true;

                }

            }

        }

So that if the user was trying to add items that would result in the capacity being exceeded we simply do nothing. However in this case it doesn't look like actionBeginEventArgs.Cancel = true actually cancels the operation (the item still moves from box 1 to box 2).

Further, is there a way to override the default styling on the toolbar? I would like to disable the buttons if the right box is already at capacity.

Thanks!

[Samantha Maislin]

I am interested in restricting the number of selections in a listbox as well.  Any updates on this request?

[Mohan Kumar Ramasamy]

Hi Greg/ Samantha , 

 

Query : restricting the number of selections in a Listbox 

 

We have checked your reported query, we need to validate more on this. So, we will update you the further details on August 28th, 2020. 

 

Query: is there a way to override the default styling on the toolbar 

 

Yes, you can override the default styling on the toolbar using  .e-listbox-tool Class. For your reference we have prepared a sample based on this, please refer below link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/157268/ze/F157268-BlazorApp1-1468747587  

 

Regards, 

Mohankumar R 

 

[Mohan Kumar Ramasamy]

Hi Greg/ Samantha ,  

 

Query : restricting the number of selections in a Listbox  

 

We can achieve your requirement using MaximumSelectionLength property to use this ShowCheckbox as true. Please refer the below code snippets. 

 

<div class="dual-list-groupa"> 

                <h4> Group A</h4> 

                <SfListBox ID="listbox1" @bind-Value="@Value"  Scope="#listbox2" DataSource="@GroupA" TItem="ListData" Height="330px" TValue="string[]" MaximumSelectionLength="3"> 

                    <ListBoxFieldSettings Text="Name"></ListBoxFieldSettings> 

                    <ListBoxSelectionSettings ShowCheckbox="true"></ListBoxSelectionSettings> 

                    <ListBoxToolbarSettings Items="@Items"></ListBoxToolbarSettings> 

                </SfListBox> 

            </div> 

            <div class="dual-list-groupb"> 

                <h4>Group B</h4> 

                <SfListBox ID="listbox2" DataSource="@GroupB" Height="330px" TItem="ListData" TValue="string[]" MaximumSelectionLength="3"> 

                    <ListBoxSelectionSettings ShowCheckbox="true"></ListBoxSelectionSettings> 

                    <ListBoxFieldSettings Text="Name"></ListBoxFieldSettings> 

                </SfListBox> 

            </div> 

 

For your reference we have prepared a sample based on this, please refer below link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/157268/ze/157268-BlazorApp11804482379  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohankumar R 

[Greg Slasor]

Sorry Mohankumar, I may have been unclear.

I see I can use MaximumSelectionLength to restrict the number of items the user can have selected at one time. What I'm interested in doing is restricting the maximum number of items the listbox can contain.

The use case is that there would be (for example) 10 items in the first listbox and 0 in the second. The user would then select items to move to the second box. The output is the set of items in the second box. I would like to limit the number of items that can be in set. MaximumSelectionLength lets me limit the number of items that can be selected/moved at once, but doesn't set a maximum capacity on the box, unless I am mistaken.

Ideally once the set is at capacity, I stop the user from being allowed to move more items to the output box, likely by disabling the "moveTo" toolbar button (hence the question about styling).

Hope this helps clarify. Let me know if I've missed something here.

Thanks for the assistance,

Greg

[Mohan Kumar Ramasamy]

Hi Greg, 

 

Sorry for the inconvenience caused. 

 

We can achieve your requirement using GetDataList method. For your reference we have prepared a sample based on this, please refer below code snippets and sample. 

 

<div class="dual-list-groupa"> 

                <h4> Group A</h4> 

                <SfListBox @ref="listboxObj1" ID="listbox1" Scope="#listbox2" DataSource="@GroupA" TItem="ListData" Height="330px" TValue="string[]" @bind-Value="SelectValue"> 

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

                </SfListBox> 

            </div> 

            <div style="width:110px;margin:5%" class="e-listbox-tool "> 

                <SfButton OnClick="@moveUp" IconCss="e-icons e-moveup">Move Up</SfButton> 

                <SfButton OnClick="@moveDown" IconCss="e-icons e-movedown">Move Down</SfButton> 

                <SfButton OnClick="@moveTo" IconCss="e-icons e-moveto" Disabled="moveToDisabled">Move To</SfButton> 

                <SfButton OnClick="@moveFrom" IconCss="e-icons e-movefrom">Move From</SfButton> 

                <SfButton OnClick="@moveAllTo" IconCss="e-icons e-moveallto" Disabled="true">Move All To</SfButton> 

                <SfButton OnClick="@moveAllFrom" IconCss="e-icons e-moveallfrom">Move All From</SfButton> 

            </div> 

            <div class="dual-list-groupb"> 

                <h4>Group B - Capacity 5 Items</h4> 

                <SfListBox @ref="listboxObj2" ID="listbox2" DataSource="@GroupB" TItem="ListData" Height="330px" TValue="string[]"> 

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

                </SfListBox> 

            </div> 

@code { 

    private bool moveToDisabled = false; 

 

    private async Task moveAllTo() 

    { 

        var DataList = await listboxObj1.GetDataList(); 

        if (DataList.Count() > 0) 

        { 

            await listboxObj1.MoveAllTo(); 

        } 

    } 

 

    private async Task moveAllFrom() 

    { 

        var DataList = await listboxObj2.GetDataList(); 

        if (DataList.Count() > 0) 

        { 

            await listboxObj2.MoveAllTo(listboxObj1.ID); 

        } 

    } 

 

    private async Task moveUp() 

    { 

        await listboxObj1.MoveUp(); 

    } 

 

    private async Task moveDown() 

    { 

        await listboxObj1.MoveDown(); 

    } 

 

    private async Task moveTo() 

    { 

 

        var DataList = await listboxObj1.GetDataList(); 

        var DataList2 = await listboxObj2.GetDataList(); 

        if ((SelectValue.Count() + DataList2.Count) > 5) 

        { 

            await JsRuntime.InvokeAsync<bool>("confirm", "Group B Listbox Capacity 5 items"); 

        } else if (DataList.Count() > 0) 

        { 

            await listboxObj1.MoveTo(); 

        } 

        DataList2 = await listboxObj2.GetDataList(); 

        if (DataList2.Count() == 5) 

        { 

            moveToDisabled = true; 

        } 

    } 

    private async Task moveFrom() 

    { 

        var DataList = await listboxObj2.GetDataList(); 

        if (DataList.Count() > 0) 

        { 

            await listboxObj2.MoveTo(listboxObj2.Value, null, listboxObj1.ID); 

        } 

        DataList = await listboxObj2.GetDataList(); 

        if (DataList.Count() < 5) 

        { 

            moveToDisabled = false; 

        } 

    } 

} 

 

Sample Link:  https://www.syncfusion.com/downloads/support/forum/157268/ze/157268-ListboxCapacity-1101291596  

 

Please let us know, if you need any further assistance, 

 

Regards, 

Mohankumar R