How do I drag grid rows to the TreeView component

[Pete Pfeifer]

I have a tree view with nodes describing categories and a grid with product rows.

I'd like to assign product to categories by dragging the rows to a tree view node.

I've tried multiple methods but I can't get it to work normally. Especially finding which node is the target.

Also if I use <GridRowDropSettings TargetID="Tree"></GridRowDropSettings> the grid loses the drag icons.

Please advise.

Thank you

[Monisha Saravanan]

Hi Pete Pfeifer,

Greetings from Syncfusion support.

We have prepared an sample as per your requirement by using an Javascript solution to drag and drop the grid rows to the tree view. Kindly check the below attached sample and code snippet for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid-1504654482.zip

 

@using Syncfusion.Blazor.Navigations

<SfTreeView TValue="TeamDetails" ID="treeview" AllowDragAndDrop="true">

    <TreeViewFieldsSettings TValue="TeamDetails" Id="Id" Text="Name" Child="Children" DataSource="@Team" Expanded="Expanded"></TreeViewFieldsSettings>

 

 

</SfTreeView>

 

<SfGrid ID="ParentGrid" @ref="Grid" DataSource="@Employees" Height="315px" AllowRowDragAndDrop="true">

    <GridEditSettings AllowAdding="true"></GridEditSettings>

    <GridRowDropSettings TargetID="treeview"></GridRowDropSettings>

    <GridEvents TValue="EmployeeData" OnRowDragStart="RowDragStart" RowDropped="RowDrop"></GridEvents>

 

    <GridColumns>

...

    </GridColumns>

</SfGrid>

 

@code {

    SfGrid<EmployeeData> Grid { get; set; }

    public string CustomerDefault { get; set; }

    private Dictionary<int?, SfGrid<Order>> DetailGrid = new Dictionary<int?, SfGrid<Order>>();

 

    private async Task RowDragStart(RowDragEventArgs<EmployeeData> args)

    {

        var DraggedData = args.Data[0];

        var dotNetReference = DotNetObjectReference.Create(this);

        await Runtime.InvokeVoidAsync("cloneelement", dotNetReference);

 

 

    }

    public int X { get; set; }

    public int Y { get; set; }

 

    [JSInvokable("RowDropped")]

    public async void RowDropped(int left, int top)

    {

        X = left;

        Y = top;

    }

    public async Task RowDrop(RowDragEventArgs<EmployeeData> args)

    {

        var DraggedData = args.Data[0];

        string list = await Runtime.InvokeAsync<string>("Insert", X, Y);

        foreach (var team1 in Team)

        {

            bool Isparent = team1.Name.Equals(list);

            if (Isparent)

            {

                // To handle when dropped in header element.

                Team.Add(new TeamDetails() { Id = DraggedData.FirstName, Name = DraggedData.LastName });

                break;

            }

 

            bool val = team1.Children.Where(x => x.Name == list).Any();

            if (val == true)

            {

                // To handle when dropped in Children element.

                var name = team1.Children;

                name.Add(new TeamDetails() { Id = DraggedData.FirstName, Name = DraggedData.LastName });

                break;

            }

 

 

        }

        if (list == null)

        {

            args.Cancel = true;

            Team.Add(new TeamDetails() { Id = DraggedData.FirstName, Name = DraggedData.LastName });

            StateHasChanged();

        }

    }

 

 

 

}

Please let us know if you face any difficulties or if you have further queries.

Regards,

Monisha

[Pete Pfeifer]

Monisha,

Thank you for the reply and the sample.

For the grid events you are using  OnRowDragStart="RowDragStart".  OnRowDragStart is obsolete, so I tried using 

the RowDragStarting event (RowDragStarting="GridRowDragStarting"). 

Unfortunately the event " RowDragStarting" never gets fired and debug shows the errors below as soon as I try to start dragging.

is there a difference between the RowDragStarting and OnRowDragStart events that would make this crash?

Uncaught TypeError TypeError: Cannot read properties of undefined (reading 'element')

    at e.removeFirstRowBorder (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:19:407516)

    at e.removeBorder (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:19:408203)

    at processDragStop (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:19:403719)

    at dragStop (C:\Users\vvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:19:402794)

    at e.blazorCallback (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:1:35337)

    at e.notify (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:1:35083)

    at e.trigger (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:1:65929)

    at t.intDragStop (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:1:163140)

Uncaught TypeError TypeError: Cannot read properties of null (reading 'style')

    at e.getElementFromPosition (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:19:408502)

    at drag (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:19:400840)

    at e.blazorCallback (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:1:35337)

    at e.notify (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:1:35083)

    at e.trigger (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:1:65929)

    at t.intDrag (C:\Users\vvvv\.nuget\packages\syncfusion.blazor.core\20.4.0.48\staticwebassets\scripts\syncfusion-blazor.min.js:1:157697)

[Monisha Saravanan]

Hi Pete Pfeifer,

Thanks for the patience.

We could able to reproduce the reported issue in our latest versions. We have considered it as an bug and we will update you once the reported issue resolved at our end. Until then we suggest you to use our volume 3 Nuget version (20.3.0.61).

We have logged an issue  “Exception throws on performing reorder between Grids to other components” for the same. Thank you for taking time to report this issue and helping us to improve our product. At Syncfusion, we are committed to fix all validated defects (subject to technological feasibility and Product Development Life Cycle) and this fix will be included in any of our upcoming patch release.

Also we have some issue with RowDragStarting event and we have fixed this issue internally and it will be available in our upcoming patch release which is going to be held on February 8^th 2023.

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

    

https://www.syncfusion.com/feedback/40603/add-or-remove-frozen-columns-dynamically-causes-errors

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization”

Until then we appreciate your patience.

Regards,

Monisha

[Monisha Saravanan]

Hi Pete Pfeifer,

Query: “OnRowDragStart is obsolete, so I tried using the RowDragStarting event (RowDragStarting = GridRowDragStarting" )

Unfortunately the event " RowDragStarting" never gets fired ”

We have internally fixed the above mentioned issue alone in our release (20.4.0.49).  So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the Nuget package for latest fixes and features from below.

Nuget : https://www.nuget.org/packages/Syncfusion.Blazor.Grid

And the fix for the issue “Exception throws on performing reorder between Grids to other components will be included in any of our upcoming patch release.

We will update once the release is rolled out. Until then we appreciate your patience.

[Pete Pfeifer]

Hi Monisha, 

Thank you for the update.

I referenced the latest package, but I was still getting errors. 

I realized that the errors are happening only if I place the grid and tree view in a SfSplitter pane - see code below. if I remove the splitter it works.  Is there a way to get this to work with the controls in a splitter?

<SfSplitter Height="100%" Width="100%">

    <SplitterPanes >

        <SplitterPane Size="500px">

            <ContentTemplate >

                <SfTreeView TValue="TeamDetails" ID="treeview" AllowDragAndDrop="true">

                    <TreeViewFieldsSettings TValue="TeamDetails" Id="Id" Text="Name" Child="Children" DataSource="@Team" Expanded="Expanded"></TreeViewFieldsSettings>

                </SfTreeView>

            </ContentTemplate>

        </SplitterPane>

        <SplitterPane Size="500px">

            <ContentTemplate >

                <SfGrid ID="ParentGrid" @ref="Grid" DataSource="@Employees" Height="315px" AllowRowDragAndDrop="true">

                    <GridEditSettings AllowAdding="true"></GridEditSettings>

                    <GridRowDropSettings TargetID="treeview"></GridRowDropSettings>

                    <GridEvents TValue="EmployeeData" RowDropped="RowDrop" RowDragStarting="RowDragStarting"></GridEvents>

                    <GridColumns>

                        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="ID" IsPrimaryKey="true" Width="110"> </GridColumn>

                        <GridColumn Field=@nameof(EmployeeData.FirstName) DefaultValue="CustomerDefault" HeaderText="First Name" Width="110"> </GridColumn>

                        <GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="110"></GridColumn>

                        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="110"></GridColumn>

                        <GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="110"></GridColumn>

                    </GridColumns>

                </SfGrid>

            </ContentTemplate>

        </SplitterPane>

    </SplitterPanes>

</SfSplitter>

[Pete Pfeifer]

Hi I want to add that having "AllowSelection="true"" on the sfGrid will also stop the solution from working. Even if they arent in a splitter.

Regards,

Pete

[Monisha Saravanan]

Hi Pete Pfeifer,

We would like to clarify that the fix for the issue “Exception throws on performing reorder between Grids to other components” is not fixed and it  will be included in any of our upcoming patch release.

Unfortunately the event " RowDragStarting" never gets fired -> We have fixed this issue alone in our latest release. So it will trigger  RowDragStarting event on dragging.

Kindly confirm us whether you are facing the same exception that you have mentioned in your above update. Is so it is not fixed and we will update you once the reported issue is resolved.

If you face different exception then kindly share the exception faced and stack trace of the exception in detail. It will help us to validate further at our end.

[Monisha Saravanan]

Hi Pete Pfeifer,

We are glad to announce that, we have included the fix for the issue “Exception throws on performing reorder between Grids to other components” in our release (20.4.0.52).  So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the Nuget package for latest fixes and features from below.

Nuget : https://www.nuget.org/packages/Syncfusion.Blazor.Grid

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Please let us know if you have any concerns.

Regards,

Monisha