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();
}
}
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?
