Hi
Richard,
Greetings
from Syncfusion support.
Yes,
it is possible to drag a Grid row in Blazor onto a TreeView node. Our Grid
provides the feature to drag and drop Grid rows to any custom component. This
feature allows you to easily move rows from one component to another without
having to manually copy and paste data.
To
enable row drag and drop, you need to set the [AllowRowDragAndDrop] property
to true and defining the custom component ID in the TargetID property of the RowDropSettings object. The ID provided
in TargetID should correspond to the ID of the target
component where the rows are to be dropped.
Then
the selected Grid row is dragged and dropped in to the TreeView by
using RowDropped event. Once the row is dropped into the TreeView
component, we have removed the corresponding Grid row from Grid and its data
inserted using the AddNodes method in TreeView component.
|
<div>
<SfGrid @ref="grid" ID="Grid"
DataSource="@GridData" AllowRowDragAndDrop="true" AllowSelection="true">
<GridRowDropSettings TargetID="TreeView"></GridRowDropSettings>
<GridEvents TValue="WrapData"
RowDropped="OnRowDrop"></GridEvents>
…
</SfGrid>
</div>
<br
/>
<div>
<SfTreeView TValue="TeamDetails" ID="TreeView" @ref="tree" AllowDragAndDrop="true">
<TreeViewFieldsSettings TValue="TeamDetails"
Id="Id" Text="Name" Child="Children" DataSource="@Team"
Expanded="Expanded"></TreeViewFieldsSettings>
</SfTreeView>
</div>
SfGrid<WrapData> grid;
SfTreeView<TeamDetails> tree;
public
async Task OnRowDrop(RowDroppedEventArgs<WrapData> args)
{
if (args.Data != null &&
args.Data.Count > 0)
{
this.tree.AddNodes(new List<TeamDetails> { new TeamDetails { Id = args.Data[0].TaskName, Name = args.Data[0].TaskName } }, "01");
foreach (var item in args.Data)
{
GridData.Remove(item);
await grid.Refresh();
}
}
}
|
Please
refer the shared sample on your end and get back to us if you need any further
assistance.
Regards,
Leo Lavanya Dhanaraj
Attachment:
sample_2e94de1f.zip
