Hello,
Most of the times when dropping an item, the on drop triggers twice, making the behaviour incorrect(it does the remove and insert twice, making it behave strange)
Bellow is the code, if you keep reordering them, you will that most of the times, the triggers counter, increases by 2
<div style="background-color: red">
Number of triggers
@triggers
</div>
<RadzenDropZoneContainer TItem="MyTask" Data="data"
ItemSelector="@ItemSelector"
ItemRender="@OnItemRender"
CanDrop="@CanDrop"
Drop="@OnDrop">
<ChildContent>
<RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" Wrap="FlexWrap.Wrap" class="rz-p-12">
<RadzenDropZone Value="Status.NotStarted" class="rz-display-flex rz-flex-column rz-background-color-warning-lighter rz-border-warning-light rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Not started" TextStyle="TextStyle.Subtitle2" />
</RadzenDropZone>
</RadzenStack>
</ChildContent>
<Template>
<strong>@context.Name</strong>
</Template>
</RadzenDropZoneContainer>
<style>
.rz-can-drop {
background-color: var(--rz-background-color-primary);
}
</style>
@code {
int triggers = 0;
// Filter items by zone value
Func<MyTask, RadzenDropZone<MyTask>, bool> ItemSelector = (item, zone) => item.Status == (Status)zone.Value && item.Status != Status.Deleted;
Func<RadzenDropZoneItemEventArgs<MyTask>, bool> CanDrop = request =>
{
// Allow item drop only in the same zone, in "Deleted" zone or in the next/previous zone.
return request.FromZone == request.ToZone || (Status)request.ToZone.Value == Status.Deleted ||
Math.Abs((int)request.Item.Status - (int)request.ToZone.Value) == 1;
};
void OnItemRender(RadzenDropZoneItemRenderEventArgs<MyTask> args)
{
args.Attributes["class"] = "rz-card rz-variant-filled rz-background-color-primary-light rz-color-on-primary-light";
// Do not render item if deleted
args.Visible = args.Item.Status != Status.Deleted;
}
void OnDrop(RadzenDropZoneItemEventArgs<MyTask> args)
{
if (args.FromZone != args.ToZone)
{
// update item zone
args.Item.Status = (Status)args.ToZone.Value;
}
if (args.ToItem != null && args.ToItem != args.Item)
{
// reorder items in same zone or place the item at specific index in new zone
data.Remove(args.Item);
data.Insert(data.IndexOf(args.ToItem), args.Item);
}
triggers++;
}
IList<MyTask> data;
protected override void OnInitialized()
{
data = Enumerable.Range(0, 5)
.Select(i =>
new MyTask()
{
Id = i,
Name = $"Task{i}",
Status = Status.NotStarted
})
.ToList();
}
public class MyTask
{
public int Id { get; set; }
public string Name { get; set; }
public Status Status { get; set; } = Status.NotStarted;
}
public enum Status
{
NotStarted,
Started,
Completed,
Deleted
}
}