SFGrid row dragged to bottom of table causes ArgumentOutOfRangeException

4 Replies
2 Participants

Created by
BE Ben_likes_astronomy

Platform
Blazor

Platform
Blazor

Control
Grid

Created On
Sep 25, 2024 02:33 AM UTC

Last Activity On
Sep 30, 2024 08:43 AM UTC

Want to subscribe?
SIGN IN

I am encountering an issue with the SyncFusion Grid in my Blazor WebAssembly application. When I try to drag a row to the last position in the table, the SfGrid component throws a JavaScript error. For instance, if I have a table with 5 data rows, I can successfully drag the item in the 1st row down to the 3rd row and move the 4th row to the 1st row. However, if I drag the 2nd row to the bottom of the table (to become the 5th item), it gives the following error:

(note: the "MyClass" is a C# class that I've defined to represent a row of data)

blazor.webassembly.js:1

Uncaught (in promise) Error: System.ArgumentOutOfRangeException: Index must be within the bounds of the List. (Parameter 'index')

at System.Collections.Generic.List`1[[MyClass, MyCSharpNameSpace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].Insert(Int32 index, MyClass item)

at System.Collections.Generic.List`1[[MyClass, MyCSharpNameSpace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].System.Collections.IList.Insert(Int32 index, Object item)

at Syncfusion.Blazor.Data.BlazorAdaptor.BatchUpdateArray[MyClass](DataManager dataMana…ullable`1 dropIndex)

at Syncfusion.Blazor.DataManager.<SaveChanges>d__167`1[[MyClass, MyCSharpNameSpace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext(MyClasss)

at Syncfusion.Blazor.Grids.Internal.RowReorder`1.<ReorderRowsAction>d__36[[MyClass, MyCSharpNameSpace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext(MyClasss)

at Syncfusion.Blazor.Grids.Internal.RowReorder`1.<ReorderRows>d__33[[MyClass, MyCSharpNameSpace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext(MyClasss)

at Syncfusion.Blazor.Grids.Internal.RowReorder`1.<ReorderRowsAction>d__36[[MyClass, MyCSharpNameSpace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext(MyClasss)

at Syncfusion.Blazor.Grids.Internal.RowReorder`1.<ReorderRows>d__33[[MyClass, MyCSharpNameSpace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext(MyClasss)

at Syncfusion.Blazor.Grids.Internal.GridJSInteropAdaptor`1.<ReorderRows>d__46[[MyClass, MyCSharpNameSpace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext(MyClasss)

at b.endInvokeDotNetFromJS (blazor.webassembly.js:1:3136)

at Object.gn [as endInvokeDotNetFromJS] (blazor.webassembly.js:1:58943)

at invoke-js.ts:233:31

at Tl (invoke-js.ts:276:5)

at 00b2193a:0x1fab4

at 00b2193a:0x1bf5b

at 00b2193a:0xf142

at 00b2193a:0x1e7aa

at 00b2193a:0x1efa0

at 00b2193a:0xcfbc

Here are the specifications for my project:

Here is the code on MyPage.razor

</GridColumns>

</SfGrid>

Here is what I have in the "@code" section of the razor page:

private SfGrid<MyClass> MyGrid;

public void RowDropHandler(RowDroppedEventArgs<MyClass> args)

{

Console.WriteLine("OnRowDropped method called");

try

{

var draggedRow = args.FromIndex; // Index of the dragged row

var targetRow = args.DropIndex-1; // Index where the row is dropped

Console.WriteLine($"Row dropped. Moved from {draggedRow} to {targetRow}");

if (draggedRow != targetRow)

{

List<MyClass> MyClassList = MyClasss.ToList();

var item = MyClassList[draggedRow];

MyClassList.RemoveAt(draggedRow);

// Ensure targetRow is within valid range

if (targetRow < 0) targetRow = 0;

if (targetRow > MyClassList.Count) targetRow = MyClassList.Count;

MyClassList.Insert(targetRow, item);

MyClasss = MyClassList.ToArray();

// Rebind the grid to reflect the changes

PendingGrid.Refresh();

}

catch (Exception ex)

{

Console.WriteLine(ex.Message);

}

4 Replies

PS Prathap Senthil Syncfusion Team September 25, 2024 09:31 AM UTC

Hi Ben_likes_astronomy

Greetings from Syncfusion,

We are unable to reproduce the reported issue when attempting to reproduce the issue in the version 26.2.14 . For your reference we have attached gif file and simple sample .So, to
further proceed with the reporting problem, we require some additional clarification from your end. Please share the below details to proceed further at our end.

Could you share a minimal reproducible example of the issue or a small dataset that consistently causes the exception? This would help in reproducing the issue for investigation.
Could you clarify if the ArgumentOutOfRangeException occurs specifically when dragging a row to the bottom of the Syncfusion Blazor Grid? It seems related to incorrect index handling during row insertion or reordering—could you provide more details on how indexes are managed in this scenario?
Does this issue occur every time when dragging any row to the last position, or is it only happening with certain rows or data conditions?
kindly share your attempt to replicate the issue using the attached simple sample.

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

Regards,
Prathap Senthil

Attachment: BlazorWebAssemblyNet8_(2)_377a87aa.zip

PS Prathap Senthil Syncfusion Team September 25, 2024 09:31 AM UTC

Please refer the below attached gif file for your reference,

Attachment: GIF_RowDragDrop_68c2ea12.zip

BE Ben_likes_astronomy September 28, 2024 12:17 AM UTC

Your sample project has helped me.

My problem was that I was using an Array instead of a List<>

It is now working. Thank you!

PS Prathap Senthil Syncfusion Team September 30, 2024 08:43 AM UTC

Thanks for the update,

We are happy to hear that the provided information was helpful. We are closing the forum now.