1. Home
  2. Forum
  3. Blazor
  4. Set maximum capacity of RHS listbox in dual listbox

Set maximum capacity of RHS listbox in dual listbox

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!


5 Replies 1 reply marked as answer
SM Samantha Maislin August 26, 2020 02:00 PM UTC

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

MK Mohan Kumar Ramasamy Syncfusion Team August 27, 2020 05:50 PM UTC

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. 
 
 
Regards, 
Mohankumar R 
 


MK Mohan Kumar Ramasamy Syncfusion Team August 28, 2020 02:37 PM UTC

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. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohankumar R 


GS Greg Slasor August 28, 2020 04:51 PM UTC

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





MK Mohan Kumar Ramasamy Syncfusion Team August 31, 2020 10:53 AM UTC

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; 
        } 
    } 
} 
 
 
Please let us know, if you need any further assistance, 
 
Regards, 
Mohankumar R 


Marked as answer
Loader.
Up arrow icon