Limit level of nesting when dragging

Hello,

as the name suggests I am look for a simple way to limit the level of nesting in hierarchy binding.

By that I mean that a user should be able to build "hierarchies" using drag and drop but only until the N-th level of nesting.

Does the TreeGrid support this? Or what is the simplest way to achieve such a behaviour?


Thanks for your help in advance


3 Replies

SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team August 4, 2023 01:53 PM UTC

Hi Heistema,


Greetings from Syncfusion support.


We do not have support for Row Drag and Drop while using Hierarchy data structure in treegrid. Kindly refer to the following documentation. We suggest you to use the Self-referential dataSource to use Row Drag and Drop.


Kindly get back to us for further assistance.


Regards,

Shek Mohammed Asiq



HE Heistema August 6, 2023 11:45 AM UTC

Well, I can easily nest and reorder my rows using Drag and Drop (using ParentId - Mapping). But I can nest them limitless...



PS Pon Selva Jeganathan Syncfusion Team August 7, 2023 03:21 PM UTC

Hi Heistema,


Query: I can easily nest and reorder my rows using Drag and Drop (using ParentId - Mapping). But I can nest them limitless


Based on your query, we understand that you want to row drag and drop functionality for a specific level. We have successfully achieved this requirement by using the RowDropping event of the treegrid. Within this event, we can prevent the row drag and drop action based on certain conditions.


Refer to the below code example,


<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" AllowRowDragAndDrop="true" TreeColumnIndex="1" IdMapping="TaskId" ParentIdMapping="ParentId" AllowPaging="true">

    <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>

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

    <TreeGridEvents RowDropping="dropping" TValue="WrapData"></TreeGridEvents>

    <TreeGridColumns>

…..

 

@code {

    SfTreeGrid<WrapData> TreeGrid;

    public List<WrapData> TreeGridData { get; set; }

 

….

    public void dropping(RowDroppingEventArgs<WrapData> args)

    {

        var treeProps =  this.TreeGrid.GetRowModel(args.Data[0]);

        var level = treeProps.Level;//Here find the level

 

        //Prevent the drop action

        //Here you can use your own logic to prevent

        if (args.Target.ID == " e-dropchild" && level >= 1 )

        {

            args.Cancel=true;

            args.PreventRender = true;

        }

    }

 


Refer to the below API documentation,

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowDropping


If the above solution, does not meet your requirement kindly share the detailed explanation of your requirement, video demo or screenshot of the requirement which is helpful to proceed further.


Kindly get back to us for further assistance.


Regards,

Pon selva


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Loader.
Up arrow icon