Detect hierarchy-level when drag'n drop.

[Soren M]

Hi - 

1. I have made a treegrid, where I want to be able to drag'n drop elements up and down in the hierarchy. I have an attribute on my model, where I show the level for the element, but how to I set a new value after a change? I cant find a event with usefull data. 

2. I also want to use the buildin add-update-cancel, but cant make the grid to detect the changes, to enable the update button in toolbar. And thereby use the OnToolbarClick event.

Please see att. project.. 

Attachment: BlazorAppTreeviewGetLevel_6429bbe1.zip

[Padmavathy Kamalanathan]

Hi Soren, 

 

Thanks for contacting Syncfusion Forums. 

 

Query 1: how to I set a new level value after a change Row DD 

 

We suggest you to update the level of dropped record in the “ActionComplete” event with “RowDragAndDrop” RequestType by changing the “ItemLevel” of data and updating it to the Tree Grid by calling “UpdateRow” method as shown in below code, 

 

 

<SfTreeGrid @ref="treeGrid" DataSource="@TreeData"  IdMapping="TaskID"  

     ParentIdMapping="ParentID" TreeColumnIndex="1" AllowPaging="false" 

     AllowRowDragAndDrop="true" EnableCollapseAll="true"> 

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

    </TreeGridSelectionSettings> 

    <TreeGridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"  

     NewRowPosition="RowPosition.Below" 

     Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row"  

     ShowConfirmDialog="true"></TreeGridEditSettings> 

    <TreeGridEvents OnActionComplete="ActionCompleteHandler" 

                    TValue="SelfReferenceData"></TreeGridEvents> 

    

</SfTreeGrid> 

 

public static SfTreeGrid<SelfReferenceData> treeGrid { get; set; } 

 

public static int ID { get; set; } 

public static int? PID { get; set; } 

public void ActionCompleteHandler(ActionEventArgs<SelfReferenceData> args) 

{ 

    if (args.RequestType == Syncfusion.Blazor.Grids.Action.RowDragAndDrop) 

    { 

        var data = treeGrid.GetCurrentViewRecords(); 

        var droppedData = data.Where(p => p.TaskID == ID).FirstOrDefault(); 

        var droppedIndex = data.FindIndex(d => d.TaskID == ID); // index of dropped data 

        PID = droppedData.ParentID; // parent id of dropped data 

        if (PID != null) 

        { 

            var parent = data.Where(p => p.TaskID == PID).FirstOrDefault(); 

            droppedData.ItemLevel = parent.ItemLevel + 1; // setting new level value 

        } 

        else 

        { 

            droppedData.ItemLevel = 1; 

        } 

        treeGrid.UpdateRow(droppedIndex, droppedData);  

        //updating level using UpdateRow method 

        if (droppedData.isParent == true) // if dropped record has child,  

         we need to update level of those child also 

        { 

            updateLevel(droppedData); //passing dropped record to updateLevel method  

            for updating child record levels 

        } 

    } 

} 

// method for updating level of child records of dropped record 

public void updateLevel(SelfReferenceData droppedData) 

{ 

    var currentViewDatas = treeGrid.GetCurrentViewRecords(); 

    for (var i = 0; i < currentViewDatas.Count; i++) 

    { 

        if (currentViewDatas[i].ParentID == droppedData.TaskID) 

        { 

            currentViewDatas[i].ItemLevel = droppedData.ItemLevel + 1; 

            treeGrid.UpdateRow(i, currentViewDatas[i]); 

            if (currentViewDatas[i].isParent == true) 

            { 

                updateLevel(currentViewDatas[i]); 

            } 

        } 

    } 

} 

 

 

Thus the level of dropped record and it’s child record(if present) will get updated with the above provided solution. 

 

Please check the below help documentations, 

https://blazor.syncfusion.com/documentation/treegrid/events/#onactioncomplete  

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

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

 

Query 2: I also want to use the buildin add-update-cancel, but cant make the grid to detect the changes, to enable the update button in toolbar 

 

By default, “Add”, “Edit”, and “Delete” options will be enabled before editing. When you select and edit any record then only “Update” and “Cancel” options will get enabled using which we can save/cancel the edited record.  

 

So “Update” option will not be enabled at initial rendering. Also we are quite unclear about your requirement. Kindly share us below details, so that we could proceed further: 

1. Please explain your requirement with exact scenario in case of toolbar customization.
2. Share us video demo of explaining your requirement.
3. In your sample, you have set “Row” edit mode. But you have also defined “BatchSave” event. Kindly let us know what edit mode you exactly need.

 

Regards, 

Padmavathy Kamalanathan          

[Soren M]

Thank you, 

1. It was the treeGrid.GetCurrentViewRecords(); I needed. 

2. The behavour for the add, delete, update panel, I found that it must have   <TreeGridEditSettings Mode="Syncfusion.Blazor.TreeGrid.EditMode.Batch"  to work as expected.

[Padmavathy Kamalanathan]

Hi Soren, 

 

We are glad to hear that your issue has been resolved. 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan