Error in SfTreeGrid Drag and Drop

[jose luis barajas]

Hi

After update to Blazor 19.1.0.57

Drag and drop in same Treegrid gives this error, please help!!!

blazor.server.js:1 Uncaught (in promise) Error: System.InvalidCastException: Unable to cast object of type 'System.Collections.Generic.List`1[System.Object]' to type 'System.Collections.Generic.List`1[System.Dynamic.ExpandoObject]'.

   at Syncfusion.Blazor.TreeGrid.Internal.RowDD`1.ReorderRows(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(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)

My code is as follows:

....

        SfTreeGrid<QueryWorkModel> treeGrid;

        public List<QueryWorkModel> treeData = new List<QueryWorkModel>();

 <div class="col-md-12 nopadding">

        <SfTreeGrid @ref="treeGrid"

                    ID="Grid"

                    DataSource="@treeData"

                    IdMapping="WORK_ID"

                    ParentIdMapping="PARENT_ID"

                    RowHeight="30"

                    Height="80%"

                    TreeColumnIndex="2"

                    AllowPaging="true"

                    AllowRowDragAndDrop="true">

            <TreeGridPageSettings 

                                  PageSize="200" 

                                  PageSizeMode="PageSizeMode.All">

            </TreeGridPageSettings>

            <TreeGridSelectionSettings 

                                       Type="Syncfusion.Blazor.Grids.SelectionType.Single">

            </TreeGridSelectionSettings>

            <TreeGridEvents 

                            OnRowDragStart="@OnRowDragStart" 

                            RowDropped="@OnRowDropped" 

                            RowDataBound="@OnRowDataBound"

                            TValue="QueryWorkModel">

            </TreeGridEvents>

...

and methods declaration, before upgrade runs fine....

  private void OnRowDragStart(Syncfusion.Blazor.Grids.RowDragEventArgs<QueryWorkModel> args)

        {

        }

        private async Task OnRowDropped(Syncfusion.Blazor.Grids.RowDragEventArgs<QueryWorkModel> args)

        {

       }

[jose luis barajas]

Testing in WASM Blazor project version 19.1.0.56

gives similar error

blazor.webassembly.js:1 Uncaught (in promise) Error: System.InvalidCastException: Specified cast is not valid.

   at Syncfusion.Blazor.TreeGrid.Internal.RowDD`1.<ReorderRows>d__17[[WEBAPI.Shared.DepartamentoModel, WEBAPI.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

   at Syncfusion.Blazor.TreeGrid.Internal.GridRenderer`1.<ReorderRows>d__82[[WEBAPI.Shared.DepartamentoModel, WEBAPI.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

    at Object.endInvokeDotNetFromJS (blazor.webassembly.js:1)

    at Object.invokeJSFromDotNet (blazor.webassembly.js:1)

    at Object.w [as invokeJSFromDotNet] (blazor.webassembly.js:1)

    at _mono_wasm_invoke_js_blazor (dotnet.5.0.5.js:1)

    at do_icall (<anonymous>:wasm-function[10596]:0x194e4e)

    at do_icall_wrapper (<anonymous>:wasm-function[3305]:0x79df9)

    at interp_exec_method (<anonymous>:wasm-function[2155]:0x44ad3)

    at interp_runtime_invoke (<anonymous>:wasm-function[7862]:0x12efff)

    at mono_jit_runtime_invoke (<anonymous>:wasm-function[7347]:0x118e5f)

    at do_runtime_invoke (<anonymous>:wasm-function[3304]:0x79d42)

[Padmavathy Kamalanathan]

Hi Jose, 

 

Thanks for contacting Syncfusion Forums. 

 

Query: Error in SfTreeGrid Drag and Drop 

 

We can reproduce the reported issue at our end. We have considered it as a bug and logged report for the same. Thank you for taking time to report this issue Script error while performing Row Drag and Drop with PageSize mode as "All" and helping us improve our product. Fix for this issue will be included in our upcoming bi-weekly release which is expected to be rolled out on or before 5^th May 2021. 

 

You can track the status of your request, review the proposed resolution timeline, and contact us for any further queries through this link, 

 

Feedback link: https://www.syncfusion.com/feedback/24689/script-error-while-performing-row-drag-and-drop-with-pagesize-mode-as-all   

 

Note: To view the above feedback, kindly login into your account. 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan         

[jose luis barajas]

Hi Padmavathy  

Thanks for your support

Its working fine now!

[Padmavathy Kamalanathan]

Hi Jose, 

 

Thanks for your update. Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan  

[jose luis barajas]

Hi

Today I have error with Blazor Drag and Drop

RowDropped not fired!, please help

My end: Blazor WASM with Syncfusion 20.1.0.61

Long time ago this was working fine without making any changes.

   <SfTreeGrid @ref="tree2"
                DataSource="@dataSource"
                IdMapping="DEPARTAMENTO_ID"
                EnableVirtualization="false"
                AllowPaging="true"
                ParentIdMapping="PADRE_ID"
                AllowExcelExport="true"
                Width="auto"
                Height="@Height"
                RowHeight="20"
                TreeColumnIndex="1"
                AllowRowDragAndDrop="true">
        <TreeGridPageSettings PageSize="30" PageSizeMode="PageSizeMode.All"></TreeGridPageSettings>
        <TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Single"></TreeGridSelectionSettings>
        <TreeGridEvents
            OnRowDragStart="OnRowDragStart"
            RowDropped="@OnCambiarParent"
            TValue="DepartamentoModel"
            DataBound="OnRowDataBound">
        </TreeGridEvents>
        <TreeGridColumns>
            <TreeGridColumn HeaderText="Acción" Width="130"/>
            <TreeGridColumn Field="DEPARTAMENTO_ID" HeaderText="Id" Width="100px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left"
                            HideAtMedia="(min-width: 800px)"/>
            <TreeGridColumn Field="NOMBRE" HeaderText="Departamento" Width="100%"/>
        </TreeGridColumns>
    </SfTreeGrid>

[Farveen Sulthana Thameeztheen Basha]

Hi Jose,

Query#:- RowDropped not fired!, please help

From your provided code example, we found that you have not enabled IsPrimaryKey property which is necessary for performing RowDragandDrop operations(which is the cause of the reported problem).

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Tree_(2)-2031449771.zip

After enabling isPrimaryKey property still faced issue in this version 20.1.61, share us the following details.

1. Complete TreeGrid code example.
2. Screenshot/Video Demo to replicate the issue.
3. If possible replicate it in the above sample and revert us back.

Regards,

Farveen sulthana T

[jose luis barajas]

Hi  Farveen sulthana T

I just tried the example you sent me and error persists.

I send you a video to show what happens.

Rows change places up or down, but not create nesting.

Also method OnCambiarParent is not fired! IMPORTANT!!!

I simplify code

<SfTreeGrid @ref="tree2"

            DataSource="@TreeGridData"

            IdMapping="DEPARTAMENTO_ID"

            AllowPaging="true"

            ParentIdMapping="PADRE_ID"

            Width="auto"

            Height="300"

            RowHeight="20"

            TreeColumnIndex="0"

            AllowRowDragAndDrop="true">

    <TreeGridPageSettings PageSize="10" PageSizeMode="PageSizeMode.All"></TreeGridPageSettings>

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

    <TreeGridEvents

        OnRowDragStart="OnRowDragStart"

        RowDropped="OnCambiarParent"

        TValue="WrapData" >

    </TreeGridEvents>

    <TreeGridColumns>

        <TreeGridColumn Field="DEPARTAMENTO_ID" IsPrimaryKey="true" HeaderText="Id" Width="100px"/>

        <TreeGridColumn Field="NOMBRE" HeaderText="Departamento" Width="100%"/>

    </TreeGridColumns>

</SfTreeGrid>

Code behind its the same.

Please help

Attachment: bandicam_20220629_100713705_46b6fbe3.rar

[Farveen Sulthana Thameeztheen Basha]

Hi Jose,

We have checked your reported problem in the attached sample but we are unable to replicate the issue at our end. Refer to the Video Demo attached:-

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video-1865377545.zip

We suspect that the reported problem may occurs when there is conflict in CSS changes because the border line on performing Draganddrop is not shown in your application. So please ensure that you have referred the CSS with version as like we have provided in our index.html page.

If you are upgrading into latest version from 19.4, we request to follow the breaking Changes that we have implemented. Refer to the documentation link:-

https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changes

If already followed, kindly Ignore.  So please ensure the steps suggested and after following this still faced issue, Share us the following details.

1. Have you applied any external CSS changes to TreeGrid. If yes please share us the details.
2. Are you facing the same issue on running the Sample directly or implementing the code snippets in your application.
3. If you are facing the issue only on your application, if possible share us the simple issue replicable sample.

Regards,

Farveen sulthana T

[jose luis barajas]

Hi Farveen 

I just checked your comments about css. I forgot to update these lines in index.html

    <link rel='nofollow' href="https://cdn.syncfusion.com/blazor/20.1.61/styles/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/blazor/20.1.61/syncfusion-blazor.min.js" type="text/javascript"></script>

Now its working fine,

thanks for your support!

[Farveen Sulthana Thameeztheen Basha]

Hi Jose,

You're most welcome. Please get back to us if you need any further assistance. We are happy to assist you.

Regards,

Farveen sulthana T