ListBox not updating underlying datasource in drag and drop

[Christopher D Robison]

I'm trying to follow your dual listbox drag and drop demo. Here is a relevant code:

<div class="row exercise-selector">

<div class="col-6">

<SfListBox TValue="int[]" TItem="Exercise"DataSource="@_newRuleExercises"

AllowDragAndDrop="true" Height="330px" Scope="@_newRuleScope2"

@attributes="newRuleListbox1Attr" @ref="_newRuleExercisesListBox">

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

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

</SfListBox>

</div>

<div class="col-6">

<SfListBox TValue="int[]" TItem="Exercise" DataSource="@_newRuleExercisesSelected"

AllowDragAndDrop="true" Height="330px" Scope="@_newRuleScope1"

@attributes="newRuleListbox2Attr" @ref="_newRuleExercisesSelectedListBox">

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

</SfListBox>

</div>

<div class="row">

<div class="col-md-12 d-flex justify-content-end" style="margin-top: 16px;">

<RadzenButton Icon="add_circle" Text="Add" Click="() => AddRule()" />

</div>

</div>

</div>

@code {

private SfListBox<int[], Exercise> _newRuleExercisesListBox = null!;

private SfListBox<int[], Exercise> _newRuleExercisesSelectedListBox = null!;

private List<Exercise> _exercises = null!;

private readonly ObservableCollection<Exercise> _newRuleExercises = new();

private readonly ObservableCollection<Exercise> _newRuleExercisesSelected = new();

private readonly string _newRuleScope1 = "newRuleScope1";

private readonly string _newRuleScope2 = "newRuleScope2";

private readonly Dictionary<string, object> newRuleListbox1Attr = new()

{

{ "id", "newRuleScope1" }

};

private readonly Dictionary<string, object> newRuleListbox2Attr = new()

{

{ "id", "newRuleScope2" }

};

public readonly string[] ToolbarItems = { "MoveUp", "MoveDown", "MoveTo", "MoveFrom", "MoveAllTo", "MoveAllFrom" };

[Inject]

public IExerciseRepository ExerciseRepository { get; set; } = null!;

protected override async Task OnInitializedAsync()

{

_exercises = (await ExerciseRepository.GetAll()).ToList();

_exercises.ForEach(exercise => _newRuleExercises.Add(exercise));

}

private async Task AddRule(Data.Rule rule)

{

var selectedExerciseIds = _newRuleExercisesSelected.Select(e => e.Id.Value).ToList();

// Do some save logic here

_newRuleExercises.Clear();

_exercises.ForEach(exercise => _newRuleExercises.Add(exercise));

_newRuleExercisesSelected.Clear();

}

}

Here is the exercise class:

public class Exercise

{

public int? Id { get; set; }

public string Name { get; set; }

public string? Description { get; set; }

public string? VideoPath { get; set; }

}

The problem I am having is that when I drag and drop or move items from the left list into the right list, the underlying datasource is not updated. And even when I use the reference to the the list boxes themselves, the datasource shows as empty. How do I get at what is currently in a ListBox?

[YuvanShankar Arunagiri]

Hi Christopher,

Query: the datasource shows as empty. How do I get at what is currently in a ListBox?

To get updated data source from the listbox, kindly use the GetDataList method of listbox. Please refer the below code snippet and attached sample code.

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

private void GetData()

    {

        var list1_updated_data = _newRuleExercisesListBox.GetDataList();

        var list2_updated_data = _newRuleExercisesSelectedListBox.GetDataList();

    }

Please get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: Counter_(1)_9e7ca93c.zip

[Sven G]

Why cannot we just bind the value of the DataList  using @bind-Value ?  When doing so, the Value ist always null.

[Keerthikaran Venkatachalam]

Hi Sven,

We have checked the reported query, and while binding `@bind-Value` to the ListBox, you can obtain the currently selected value. Please refer to the code snippets, sample, and video demonstration below.

<SfButton CssClass="e-primary" @onclick="Click">Get Value</SfButton>

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

    <div id="listbox-control">

        <h4>Select your favorite car:</h4>

        <SfListBox @ref="ListBoxObj" AllowDragAndDrop="true" @bind-Value=@value DataSource="@vehicleData" TValue="string[]" TItem="ListItem">

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

        </SfListBox>

    </div>

</div>

@code

{

    SfListBox<string[], ListItem> ListBoxObj;

    private string[] value = new string[] { "Hennessey Venom" };

    private List<ListItem> vehicleData = new List<ListItem>

    {

        new ListItem { Text = "Hennessey Venom", Id = "List-01" },

        new ListItem { Text = "Bugatti Chiron", Id = "List-02" },

        new ListItem { Text = "Bugatti Veyron Super Sport", Id = "List-03" },

    };

    public class ListItem

    {

        public string Text { get; set; }

        public string Id { get; set; }

    }

    private void Click()

    {

        var currentSelectedValue= value;

    }

}

However, to obtain updated all data from the listbox, please use the GetDataList method of the listbox.

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: Sample_c84e1be2.zip