Row Drag and Drop Example in same tree.

[Basil Buwalda]

Hi all,

We have a TreeGrid which is populated from a list of BusinessActivity objects. The Grid is populated correctly

\

We drag item 1333 to be a child of 331, and the RowDropped event fires. 

The args.Data contains all the items which have been dragged and dropped however the ParentId still refers to the old ParentID of 332. 

The args.DropIndex contains index value 2, but I cannot find any obvious way to find the new Parent Object using the args.DropIndex.

Could you please provide me with an example of how to find the new parent object using the args.DropIndex?

Code Snippet below.

Kind Regards

Basil

 

<SfTreeGrid @ref="@TreeGrid" DataSource="@businessActivityDatasource" IdMapping="Id" ParentIdMapping="ParentId" AllowRowDragAndDrop="true" TreeColumnIndex="1">

        <TreeGridEvents TValue="BusinessActivity"

                        RowSelected="BusinessActivitySelected"

                        RowDropped="BusinessActivityDropped"></TreeGridEvents>

        <TreeGridColumns>

            <TreeGridColumn Field="Id" HeaderText="Id" Width="80" IsPrimaryKey="true" Visible="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>

            <TreeGridColumn Field="Name" HeaderText="Name" Width="240"></TreeGridColumn>

            <TreeGridColumn Field="ParentId" HeaderText="Pid" Width="240" Visible="true"></TreeGridColumn>

        </TreeGridColumns>

 </SfTreeGrid>

@code 

{

....

[Parameter] public EventCallback<BusinessActivity> OnBusinessActivitySelected { get; set; }

[Parameter] public EventCallback<BusinessActivity> OnBusinessActivityDropped { get; set; }

protected List<BusinessActivity> businessActivityDatasource;

protected SfTreeGrid<BusinessActivity> TreeGrid;

....

    public async Task BusinessActivityDropped(RowDragEventArgs<BusinessActivity> args)

    {

        BusinessActivity newParentBusinessActivity = //Please help to find the Parent Object using the args.DropIndex

        if (!args.Cancel)

        {

            foreach(var draggedBusinessActivities in args.Data)

            {

                draggedBusinessActivities.ParentId = newParentBusinessActivity.Id;

                await BusinessActivitiesManager.UpdateBusinessActivity(draggedBusinessActivities);

            }

        }

    }

}

[Sathyanarayanamoorthy Eswararao]

Hi Basil, 

Thanks for using Syncfusion products. 

Query : Could you please provide me with an example of how to find the new parent object using the args.DropIndex? 

 

The target parent record can be obtained from the currentviewdata of the treegrid using the dropindex of the rowdropped event arguments. Refer the below code example for more details. 

<SfTreeGrid @ref="treeGrid" DataSource="@TreeGridData" AllowRowDragAndDrop="true" TreeColumnIndex="1" IdMapping="TaskId" ParentIdMapping="ParentId" AllowPaging="true"> 

    <TreeGridPageSettings PageSize="2"></TreeGridPageSettings> 

    <TreeGridEvents RowDropped="rowdrop" TValue="WrapData"></TreeGridEvents> 

    <TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></TreeGridSelectionSettings> 

    <TreeGridColumns> 

        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 

        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="240"></TreeGridColumn> 

        <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 

        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 

        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn> 

    </TreeGridColumns> 

</SfTreeGrid> 

 

@code{ 

 

    SfTreeGrid<WrapData> treeGrid { get; set; } 

 

    public List<WrapData> TreeGridData { get; set; } 

 

    protected override void OnInitialized() 

    { 

        TreeGridData = WrapData.GetWrapData(); 

    } 

 

    private void rowdrop(RowDragEventArgs<WrapData> args) 

    { 

        var CurrentViewData = this.treeGrid.GetCurrentViewRecords(); 

 

        var targetParent = CurrentViewData.ElementAt((int)args.DropIndex); 

 

    } 

Refer the below documentation for more details. 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_GetCurrentViewRecords  

Regards, 

Sathyanarayanamoorthy