1. Home
  2. Forum
  3. Blazor
  4. Unable to set up Dual ListBox

Unable to set up Dual ListBox

Good day,

I've been trying to set up a "Dual ListBox" I copied the code provided at here with no modifications to it. Unless I'm understanding it incorrectly when I move an item from one box to the other it should also do it in the underlying lists, so both visually and in the DataSources.

However, when I move everything from GroupA to GroupB (or even a single item) on the webpage I see that all the items are in GroupB (visually), but when I check through a breakpoint, then I see that the DataSources themselves have not been modified.

Is this the expected behavior, am I supposed to implement my own logic in order to transfer the items from one list to the other?

PS: I also copied the code provided on the demo with no luck.


4 Replies 1 reply marked as answer
SP Sangeetha Priya Murugan Syncfusion Team November 24, 2021 05:21 PM UTC

Hi Azif, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported requirement and we need to validate more on this, so we will update you the further details on November 26th 2021. We appreciate your patience until then. 
 
Regards, 
Sangeetha M 


GK Gayathri KarunaiAnandam Syncfusion Team November 26, 2021 03:48 PM UTC

Hi Asif, 

Thanks for the patience. 

We have validated your query. We would like to let you know that when an item is moved from one list to another , you can get the update listbox data list by using the GetDataList method of ListBox. Please check the below sample. 

              <SfListBox Scope="@scope2" DataSource="@groupA" TItem="ListItem" Height="330px" TValue="string[]" @attributes="listbox1Attr" @ref="list1"> 
                    <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings> 
                    <ListBoxToolbarSettings Items="@items"></ListBoxToolbarSettings> 
                    <ListBoxTemplates TItem="ListItem"> 
                        <NoRecordsTemplate> 
                            <span>NO DATA AVAILABLE</span> 
                        </NoRecordsTemplate> 
                    </ListBoxTemplates> 
                </SfListBox> 
            </div> 
            <div class="dual-list-groupb"> 
               <h4>Group B</h4> 
                <SfListBox Scope="@scope1" DataSource="@groupB" Height="330px" TItem="ListItem" TValue="string[]" @attributes="listbox2Attr" @ref="list2"> 
                    <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings> 
                    <ListBoxTemplates TItem="ListItem"> 
                        <NoRecordsTemplate> 
                            <span>NO DATA AVAILABLE</span> 
                        </NoRecordsTemplate> 
                    </ListBoxTemplates> 
                </SfListBox> 
            </div> 
        </div> 
    </div> 
</div> 
<SfButton OnClick="Click">Updated DataSource</SfButton> 
@code 
{ 
    SfListBox<string[] , ListItem >list1; 
    SfListBox<string[] , ListItem >list2; 
    private string[] items = new string[] { "MoveUp", "MoveDown", "MoveTo", "MoveFrom", "MoveAllTo", "MoveAllFrom" }; 
    private readonly string scope1 = "scope1"; 
    private readonly string scope2 = "scope2"; 
    private readonly Dictionary<string, object> listbox1Attr = new Dictionary<string, object> 
    { 
        { "id", "scope1" } 
    }; 
    private readonly Dictionary<string, object> listbox2Attr = new Dictionary<string, object> 
    { 
        { "id", "scope2" } 
    }; 
    private List<ListItem> groupA = new List<ListItem> { 
        new ListItem { Name = "Australia", Code = "AU" }, 
        new ListItem { Name = "Bermuda", Code = "BM" }, 
    }; 
    private List<ListItem> groupB = new List<ListItem> { 
        new ListItem { Name = "India", Code = "IN" }, 
        new ListItem { Name = "Italy", Code = "IT" }, 
        new ListItem { Name = "Japan", Code = "JP" }, 
    }; 
    public class ListItem 
    { 
        public string Name { get; set; } 
        public string Code { get; set; } 
    } 
    public void Click() 
    { 
        var list1Data = list1.GetDataList(); 
        var list2Data = list2.GetDataList(); 
 
    } 
} 

For your reference, please check the below sample link. 



Please get back to us, if you need further assistance. 

Regards, 
Gayathri K 


Marked as answer
AZ Azif November 26, 2021 05:38 PM UTC

Good evening,


I got it working now by using GetDataList() provided by Gayathri K, I hadn't realized that there was such a method.


Thanks for the help,

Azif


GK Gayathri KarunaiAnandam Syncfusion Team November 29, 2021 05:49 AM UTC

Hi Azif, 

Thanks for the update. 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

Regards, 
Gayathri K 


Loader.
Up arrow icon