DataGrid row reorder

Radzen.Blazor Components
1

Hi,

Is there a way to limit where on the row the user can click to drag?

I have other elements on the row like buttons and text and hyperlinks. When the user tries to select text for example, the little hand appears and the row starts to drag.

Ideally, I could add an icon to the row somewhere where they could grab it, like a "handle".

Thanks,
Mike

2

Adding @ondragstart:stopPropagation=“true” might help.

3

You can adapt the demo code to use a handle. Move the ondragstart code there:

<RadzenDataGridColumn ...>
   <Template>
       <RadzenIcon @ondragstart=@(() => draggedItem = context) .. />
4

Is that the only line to move?

Do I also need to move the rest from RowRender?

Could I do something with "args" in the code below to gain access to the drag handle element?

Thanks

private void RowRender(RowRenderEventArgs<MyClass> args)
{
    args.Attributes.Add("title", "Drag row to reorder");
    args.Attributes.Add("style", "cursor:grab");
    args.Attributes.Add("draggable", "true");
    args.Attributes.Add("ondragover", "event.preventDefault()");
    args.Attributes.Add("ondragstart", EventCallback.Factory.Create<DragEventArgs>(this, () => draggedItem = args.Data));
    args.Attributes.Add("ondrop", EventCallback.Factory.Create<DragEventArgs>(this, async () =>
    {
        var draggedIndex = mydata_collection.IndexOf(draggedItem);
        var droppedIndex = mydata_collection.IndexOf(args.Data);

        mydata_collection.Remove(draggedItem);
        mydata_collection.Insert(draggedIndex <= droppedIndex ? droppedIndex++ : droppedIndex, draggedItem);

        await ReorderMyRecords();
    }));
}
5

Hi,

I figured out a fairly clean solution to using the handle icon for dragging.

Keep certain attributes in RowRender function.

And add a new function to return handle attributes.


<RadzenDataGrid 
        RowRender=RowRender>
<Columns>
    <RadzenDataGridColumn>
        <Template Context=data>
            <RadzenIcon Icon="drag_handle" Attributes=HandleAttributes(data) />

private void RowRender(RowRenderEventArgs<MyClass> args)
{
    args.Attributes.Add("ondragover", "event.preventDefault()");
    args.Attributes.Add("ondrop", EventCallback.Factory.Create<DragEventArgs>(this, async () =>
    {
        var draggedIndex = my_collection.IndexOf(draggedItem);
        var droppedIndex = my_collection.IndexOf(args.Data);

        if (draggedIndex != droppedIndex)
        {
            my_collection.Remove(draggedItem);
            my_collection.Insert(draggedIndex <= droppedIndex ? droppedIndex++ : droppedIndex, draggedItem);
        }

    }));
}



private IReadOnlyDictionary<string, object> HandleAttributes(MyClass x)
{
    Dictionary<string, object> atts = new();

    atts.Add("title", "Drag row to reorder");
    atts.Add("style", "cursor:grab");
    atts.Add("draggable", "true");
    atts.Add("ondragstart", EventCallback.Factory.Create<DragEventArgs>(this, () => draggedItem = x));

    return atts;
}

Hope that helps someone.

Mike

2 Likes
6

thnx @sys_mike

u really saved my time & code ! :wink:

7

You're welcome @gisaac85 - glad it helped you.
Radzen does so much for me - it's nice to contribute something back.
Mike