Help using MoveAsync() method

[Peter]

Hello,

I am having trouble using the MoveAsync() method for a Listbox control. The documentation states:

MoveAsync(TValue, Nullable, String)

Moves the given value(s) / selected value(s) to the given / default scoped ListBox.

Declaration

public Task MoveAsync(TValue values = null, Nullable<double> index = null, string scope = null)

Parameters

Type	Name	Description
TValue	values	Specifies the value(s).
System.Nullable<System.Double>	index	Specifies the index to place the moved items.
System.String	scope	Specifies the destination ListBox reference.

Returns

Type	Description
System.Threading.Tasks.Task

I have to instances of SfListbox defined as:

<SfListBox @ref="@listboxAvailable" ID="listbox-available" Scope="listbox-selected" DataSource="@groupA" TItem="ListItem" Height="330px" TValue="string[]">

and

<SfListBox @ref="@listboxSelected" ID="listbox-selected" Scope="listbox-available" DataSource="@groupB" Height="330px" TItem="ListItem" TValue="string[]">

I was thinking that the following code would move the selected items in listboxAvailable to listboxSelected:

await listboxAvailable.MoveAsync(listboxAvailable.Value, 0, listboxAvailable.Scope);

but I get the unexpected behavior of:

1. The selected item is (visually) removed from listboxAvailable
2. The item is not (visually) added to listboxSelected
3. And the selected data element is not removed from the underlying (ObservableCollection) datasource @groupA nor added to @groupB
   

I am customizing your dual listbox example with the exception of:

1. Data sources changed to ObservableCollection
2. Implementing my own move buttons

Obviously I am misunderstanding the use of the MoveAsync() method. Any suggestions will be apprciated.

Peter

[Aravinthan Seetharaman]

Hi Peter, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We would like to let you know that we have deprecated the ID property in SfListBox in the release version 18.3.35. Please refer the below release notes. 

  

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/18.3.35?type=all#listbox  

 

So, we suggest you please add id property using @attributes. Please refer the below code snippet and sample. 

 

Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/listMoveAsync-2028641829  

 

Index.html 

@using Syncfusion.Blazor.DropDowns 

@using Syncfusion.Blazor.Buttons 

@using System.Collections.ObjectModel 

 

<SfButton Content="Move to GroupB" OnClick="MoveToB"></SfButton> 

<br /> 

 

<div id="listbox1"> 

    <h4>Group A</h4> 

    <SfListBox TValue="string[]" DataSource="@GroupA" Scope="scope2" TItem="ListDataModel" @attributes="listbox1Attr" @ref="listObj1"> 

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

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

    </SfListBox> 

</div> 

<div id="listbox2"> 

    <h4>Group B</h4> 

    <SfListBox TValue="string[]" Scope="scope1" DataSource="@GroupB" TItem="ListDataModel" @attributes="listbox2Attr" @ref="listObj2"> 

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

    </SfListBox> 

</div> 

 

@code { 

    SfListBox<string[], ListDataModel> listObj1; 

    SfListBox<string[], ListDataModel> listObj2; 

    private readonly Dictionary<string, object> listbox1Attr = new Dictionary<string, object> 

    { 

        { "id", "scope1" } 

    }; 

    private readonly Dictionary<string, object> listbox2Attr = new Dictionary<string, object> 

    { 

        { "id", "scope2" } 

    }; 

    public string[] Items = new string[] { "MoveUp", "MoveDown", "MoveTo", "MoveFrom" }; 

    ObservableCollection<ListDataModel> GroupA = new ObservableCollection<ListDataModel>() 

    { 

     new ListDataModel{ Id = "1", Text = "Artwork"}, 

     new ListDataModel{ Id = "2", Text = "Abstract"}, 

     new ListDataModel{ Id = "3", Text = "Modern Painting"}, 

     new ListDataModel{ Id = "4", Text = "Ceramics"}, 

     new ListDataModel{ Id = "5", Text = "Animation Art"}, 

 

    }; 

 

    ObservableCollection<ListDataModel> GroupB = new ObservableCollection<ListDataModel>() 

    { 

     new ListDataModel{ Id = "11", Text = "Painting"}, 

     new ListDataModel{ Id = "22", Text = "Gardening"}, 

     new ListDataModel{ Id = "33", Text = "Teaching"}, 

     new ListDataModel{ Id = "44", Text = "Swimming"}, 

     new ListDataModel{ Id = "55", Text = "Oil Painting"}, 

    }; 

 

    class ListDataModel 

    { 

        public string Id { get; set; } 

        public string Text { get; set; } 

    } 

 

    public async Task MoveToB() 

    { 

        await listObj1.MoveAsync(listObj1.Value,null, listObj1.Scope); 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListBox_moveAync-869079784  

 

Could you please check the above suggested way and let me know if you need any assistance on this. 

 

Regards, 

Aravinthan S