Row drag and drop in WinUI TreeGrid (SfTreeGrid)

4 Jul 20226 minutes to read

SfTreeGrid allows you to drag and drop the rows by setting the AllowRowDragDrop and AllowDrop properties to true. You can also drag and drop the rows between treegrid and other controls such as ListView, DataGrid and SfTreeView.

XAML

<syncfusion:SfTreeGrid Name="sfTreeGrid" 
                               AllowRowDragDrop="True" 
                               AllowDrop="True" 
                               ChildPropertyName="ReportsTo" 
                               ItemsSource="{Binding Employees}"
                               ParentPropertyName="ID"
                               SelfRelationRootValue="-1" />

C#

sfTreeGrid.AllowRowDragDrop = true;
sfTreeGrid.AllowDrop = true;

While dropping, the dragging nodes can be added above or below or as a child node based on their DropPosition. For example, if you drop a node at the bottom of the target node, it will be added below the target node. If you drop over the target node, it will be added as a child of that target node.

NOTE

Drag indicators will not be shown when DropPosition is set to AsChild.

Drag multiple nodes

SfTreeGrid allows users to select and drag multiple nodes. You can enable multiple selection by setting the SfTreeGrid.SelectionMode property to Multiple or Extended.

Drag and drop events

When dragging and dropping the nodes SfTreeGrid triggers the following events:

RowDragStarting event

RowDragStarting event occurs when you start to drag the node in the SfTreeGrid. The TreeGridRowDragStartingEventArgs has the following member, which provides information for the RowDragStarting event.

DraggingNodes: Gets the TreeNode that contains the data associated when dragging the rows.

Cancel : Gets or sets a value indicating whether the event is canceled or not.

C#

this.sfTreeGrid.RowDragStarting += SfTreeGrid_RowDragStarting;

private void SfTreeGrid_RowDragStarting(object sender, TreeGridRowDragStartingEventArgs e)
{

}

RowDragOver event

RowDragOver event occurs continuously when dragging the tree node in the SfTreeGrid. The TreeGridRowDragOverEventArgs has the following members, which provide information for the RowDragOver event:

Data: Gets a data object that contains the data associated with dragging the nodes.

DraggingNodes: Gets the tree node that contains the data associated with dragging the nodes.

DropPosition: Gets a value indicating the drop position based on the dropped location.

ShowDragUI: Gets or sets the visibility of Dragging UI.

TargetNode: Gets a value that indicates the target node where the record is going to be drop.

C#

this.sfTreeGrid.RowDragOver += SfTreeGrid_RowDragOver;

private void SfTreeGrid_RowDragOver(object sender, TreeGridRowDragOverEventArgs e)
{

}

RowDropping event

RowDropping event occurs when a tree node is dropping in the SfTreeGrid. The TreeGridRowDroppingEventArgs has the following members, which provide information for the RowDropping event:

Cancel : Gets and sets a value indicating whether the event is canceled or not.

Data: Gets a data object that contains the data associated with dragging the nodes.

DraggingNodes: Gets the tree node that contains the data associated with dragging the nodes.

DropPosition: Gets a value indicating the drop position based on the dropped location.

TargetNode: Gets a value that indicates the target node where the record is going to be drop.

C#

this.sfTreeGrid.RowDropping += SfTreeGrid_RowDropping;

private void SfTreeGrid_RowDropping(object sender, TreeGridRowDroppingEventArgs e)
{

}

RowDropped event

RowDropped event occurs after dropped the tree nodes in the SfTreeGrid. The TreeGridRowDroppedEventArgs has the following members, which provide information for the RowDropped event:

Data: Gets a data object that contains the data associated with dragging the nodes.

DraggingNodes: Gets the tree node that contains the data associated with dragging the nodes.

DropPosition: Gets a value indicating the drop position based on the dropped location.

TargetNode: Gets a value that indicates the target node where the record is going to be drop.

C#

this.sfTreeGrid.RowDropped += SfTreeGrid_RowDropped;

private void SfTreeGrid_RowDropped(object sender, TreeGridRowDroppedEventArgs e)
{
    
}

Customizing row drag and drop operation

Disable dragging of certain nodes

You can restrict the dragging for specific nodes in SfTreeGrid by using the SfTreeGrid.RowDragStarting event.

C#

this.sfTreeGrid.RowDragStarting += SfTreeGrid_RowDragStarting;

private void SfTreeGrid_RowDragStarting(object sender, TreeGridRowDragStartingEventArgs e)
{
    var nodes = e.DraggingNodes;
    var item = nodes[0].Item as Employee;
    if (item.FirstName == "Richard")
        e.Cancel = true;
}

Disable dropping of certain nodes

You can restrict the dropping for specific nodes in SfTreeGrid by using the SfTreeGrid.RowDropping event.

C#

this.sfTreeGrid.RowDropping += SfTreeGrid_RowDropping;

private void SfTreeGrid_RowDropping(object sender, TreeGridRowDroppingEventArgs e)
{
    // Disable drop on leaf nodes.
    if (!e.TargetNode.HasChildNodes)
        e.Cancel = true;
}

Disable default Drag UI

You can disable the draggable pop-up by setting the ShowDragUI in SfTreeGrid.RowDragOver event.

C#

this.sfTreeGrid.RowDragOver += SfTreeGrid_RowDragOver;

private void SfTreeGrid_RowDragOver(object sender, TreeGridRowDragOverEventArgs e)
{
    e.ShowDragUI = false;
}