Drag and drop issues

I used to be able to drag and drop rows within the same treegrid but now it doesn't work anymore. What am I doing wrong?

I've tried recreating the issue on this page:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowRowDragAndDrop="true" AllowSelection="true" AllowReordering="true">
<TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Single"></TreeGridSelectionSettings>
<TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
@*<TreeGridRowDropSettings TargetID="TreeGrid"></TreeGridRowDropSettings>*@
<TreeGridColumns>
<TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
<TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>

@code {
private int currentCount = 0;

private void IncrementCount()
{
currentCount++;
}

public class BusinessObject
{
public int TaskId { get; set; }
public string TaskName { get; set; }
public int Duration { get; set; }
public int Progress { get; set; }
public string Priority { get; set; }
public int? ParentId { get; set; }
}

public List<BusinessObject> TreeData = new List<BusinessObject>();

protected override void OnInitialized()
{
TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
}
}


3 Replies 1 reply marked as answer

PS Pon Selva Jeganathan Syncfusion Team March 29, 2021 12:47 PM UTC

Hi Andy,   
 
Thanks for contacting syncfusion forum. 
   

Query: Drag and drop issues

We have checked your problem by preparing sample with your code snippet,  we are able to reproduce the issues at our end. On further validation, in your sample you are using selection type as single and have not set the primary key column. So, while using drag and drop, we recommend that you set the selection type to "Multiple" and any one of the columns to set isPrimaryKey property to true.

Please refer to the below code snippet

 
 
 
Your code: 
<SfTreeGrid @ref="treegrid" DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowRowDragAndDrop="true" AllowPaging="true" AllowReordering="true"> 
 
              <TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Single"></TreeGridSelectionSettings> 
 
 
              <TreeGridColumns> 
        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 
        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn> 
        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 
        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 
        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn> 
    </TreeGridColumns> 
 
               
 
 
 
Modified code: 
<SfTreeGrid @ref="treegrid" DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowRowDragAndDrop="true" AllowPaging="true" AllowReordering="true"> 
    <TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></TreeGridSelectionSettings> 
   
    <TreeGridColumns> 
        <TreeGridColumn Field="TaskId" IsPrimaryKey="true" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 
        …. 
    </TreeGridColumns> 
</SfTreeGrid> 
 
@code {  

 

Please refer to the below sample link:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerApp-998817751

 
Please refer to the below documentation and demo link, 
 
Please refer to the below API link: 
 
Kindly get back to us for further assistance. 

Regards,  
Pon selva   



Marked as answer

AR Andy Richard March 30, 2021 02:24 AM UTC

That worked. Thank you so much.


PS Pon Selva Jeganathan Syncfusion Team March 30, 2021 03:02 PM UTC

Hi Andy,   
 
Thanks for the update. 
 
We are glad to hear that query has been resolved by our solution.   
   
Kindly get back to us for further assistance. We are happy to assist you. 

Regards,  
Pon selva   


Loader.
Up arrow icon