Drag & Drop not working between two TreeGrids with Custom Data Adaptor
Hi,
I am trying to use Drag & Drop between two Blazor SfTreeGrid controls which use a custom data adaptor (implemented as a Blazor component). The Grids render and generally work fine, and the OnRowDragStart event fires correctly, but the RowDropped event handler never gets called. Instead I see this in the console:
Uncaught (in promise) Error: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
at System.Collections.Generic.List`1.get_Item(:5001/Int32 index)
at Syncfusion.Blazor.TreeGrid.Internal.RowDD`1.ReorderRows(:5001/Int32 fromIndex, Int32 toIndex, String dropPosition, String action, Boolean isDragWithinGrid, String targetClass, String targetId, DotNetObjectReference`1 destInstance, Boolean outsideGrid)
at Syncfusion.Blazor.TreeGrid.Internal.GridRenderer`1.ReorderRows(:5001/Int32 fromIndex, Int32 toIndex, String action, Boolean isDragWithinGrid, String targetClass, String targetId, DotNetObjectReference`1 destInstance, Boolean outsideGrid, String dropPosition)
at Object.endInvokeDotNetFromJS (blazor.server.js:1)
at e.<anonymous> (blazor.server.js:10)
at blazor.server.js:1
at Array.forEach (<anonymous>)
at e.invokeClientMethod (blazor.server.js:1)
at e.processIncomingData (blazor.server.js:1)
at e.connection.onreceive (blazor.server.js:1)
at WebSocket.i.onmessage (blazor.server.js:1)
This seems to be a similar problem to this one: drag-drop-with-remote-data-not-working, but the difference is I am using a Custom adaptor.
The grid definitions look like this...
<SfTreeGrid ID="MappedFunds" @ref="MappedFunds" AllowRowDragAndDrop="true" AllowSelection="true" TValue="SectorModelInfo" TreeColumnIndex="1" IdMapping="GridId" ParentIdMapping="ParentId" HasChildMapping="HasChildren" >
<SfDataManager Adaptor="Adaptors.CustomAdaptor">
<SectorModelsDataAdaptor Mapped="true"></SectorModelsDataAdaptor>
</SfDataManager>
<TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></TreeGridSelectionSettings>
<TreeGridRowDropSettings TargetID="UnmappedFunds"></TreeGridRowDropSettings>
<TreeGridEvents TValue="SectorModelInfo" OnRowDragStart="RowDragged" RowDropped="RowDropped"></TreeGridEvents>
<TreeGridColumns>
<!-- (column definitions) -->
</TreeGridColumns>
</SfTreeGrid>
...and...
<SfTreeGrid ID="UnmappedFunds" @ref="UnmappedFunds" AllowRowDragAndDrop="true" AllowSelection="true" TValue="SectorModelInfo" TreeColumnIndex="1" IdMapping="GridId" ParentIdMapping="ParentId" HasChildMapping="HasChildren" >
<SfDataManager Adaptor="Adaptors.CustomAdaptor">
<SectorModelsDataAdaptor Mapped="false"></SectorModelsDataAdaptor>
</SfDataManager>
<TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></TreeGridSelectionSettings>
<TreeGridRowDropSettings TargetID="MappedFunds"></TreeGridRowDropSettings>
<TreeGridEvents TValue="SectorModelInfo" OnRowDragStart="RowDragged" RowDropped="RowDropped"></TreeGridEvents>
<TreeGridColumns>
<!-- (column definitions) -->
</TreeGridColumns>
</SfTreeGrid>
The data adaptor creates a 3-level hierarchy in the first grid, and a 2-level hierarchy in the second. The event handler is currently just a placeholder so I can set a breakpoint on it - but it never gets called:
public async Task RowDropped(RowDragEventArgs<SectorModelInfo> args)
{
var x = args;
}
It doesn't matter which way I drag the rows, which rows I drag or where I drop them - it's always the same error. Please can you fix this?
BTW I also get the same error if I comment out the TreeGridRowDropSettings element and try dragging internally wi
I have figured out the problem: it needs to have a column with IsPrimaryKey="true" defined, otherwise you will get this error. As far as I can see that's not made clear in the documentation - I had to work it out through a process of elimination based on the sample demo code.
- 3 Replies
- 2 Participants
- Marked answer
-
CH Charles
- Aug 30, 2021 03:45 PM UTC
- Aug 31, 2021 04:27 PM UTC
