how can i update dataSource after drag and drop?

[Hewen Bin]

https://ej2.syncfusion.com/angular/documentation/list-box/drag-and-drop/

i can not get changed data after drag and drop

thank you

[YuvanShankar Arunagiri]

Hi Hewen,

We have validated your reported query. we can get the updated dataSource in Listbox by using the GetDataList method in Listbox. Please check the below code snippet.

[Index.html]:

@using Syncfusion.Blazor.DropDowns

 

<div class="col-lg-12 control-section">

    <div id="drag-drop-wrapper">

        <div class="listbox-control">

            <h4>Group A</h4>

            <SfListBox DataSource="@groupA" Scope="@scope" TItem="ListItem" AllowDragAndDrop="true" Height="330px" TValue="string[]">

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

            </SfListBox>

        </div>

        <span class="e-swap-icon"></span>

        <div class="listbox-control">

            <h4>Group B</h4>

            <SfListBox DataSource="@groupB" Scope="@scope" TItem="ListItem" AllowDragAndDrop="true" Height="330px" TValue="string[]" @ref="list">

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

            </SfListBox>

        </div>

    </div>

</div>

<button @onclick="GetData">Get Data</button>

@code{

    SfListBox<string[], ListItem> list;

    private readonly string scope = "combined-list";

    private List<ListItem> groupA = new List<ListItem> {

        new ListItem { Name = "Australia", Code = "AU" },

        new ListItem { Name = "Bermuda", Code = "BM" },

        new ListItem { Name = "Canada", Code = "CA" },

        new ListItem { Name = "Cameroon", Code = "CM" },

        new ListItem { Name = "Denmark", Code = "DK" },

        new ListItem { Name = "France", Code = "FR" },

        new ListItem { Name = "Finland", Code = "FI" },

        new ListItem { Name = "Germany", Code = "DE" },

        new ListItem { Name = "Hong Kong", Code = "HK" }

    };

    private List<ListItem> groupB = new List<ListItem> {

        new ListItem { Name = "India", Code = "IN" },

        new ListItem { Name = "Italy", Code = "IT" }

    };

    public class ListItem

    {

        public string Name { get; set; }

        public string Code { get; set; }

    }

    private void GetData()

    {

        var Data = list.GetDataList();

    }

}

For more details about API, please check the below link.

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

Please check the above link and get back to us, if you need further assistance.

Regards,

YuvanShankar A