Drag & Drop Event-Not able to find new parent details to update in database via API

[Ranjeet]

Hi ,

I have a requirement where drag & drop needs to implement.

I was taken trial version of Tree Grid with React, but when i moved one row from existing parent to new parent then

not able to catch new parent details .

as i have to update details in database like unmapped from current parent  and mapped item to new parent via API call.

And any way to find the inline edit event to update node name into database via API call.

Regards,

Ranjeet Patel

[Pon Selva Jeganathan]

Hi Ranjeet,

While using remote Data, we need to handle the rowDraganddrop operations at served end. We have achieved this with the help rowDrop event and refresh method of the treegrid.

In the rowDrop event, we have handled the drag-and-drop action in the TreeGrid. In this event, we have prevent the default drag drop action by using the args.cancel property. And collected dragged, dropped records using getCurrentViewRecords method and  sends the relevant data (dragged and dropped datas, drop position, etc.) to the server via an API call. The server-side logic processes the data, updates the database, and returns the result. Upon a successful response from the server, the TreeGrid is refreshed.

In server end based on drop positions (top, middle, bottom) updates the parent-child relationships accordingly. And where a dragged record becomes the only child of its parent, updating the isParent( which is hasChildMapping property) property accordingly.

Please refer to the below code example,

 

  const dataManager: DataManager = new DataManager({

        adaptor: new UrlAdaptor,

        url: https://localhost:7297/Home/UrlDatasource,

        crossDomain: true

    });

    var primaryKeyList: any[] = [];

 const editsetting:any =  {allowAdding:true,allowEditing:true,allowDeleting:true, mode:'Dialog'};

 

 

 

const rowDrop=(args:any) =>{

    var tree=(document.getElementsByClassName('e-treegrid')[0] as any).ej2_instances[0];

    var proxy = tree;

    var record1 = tree.getCurrentViewRecords()[args.fromIndex][tree.idMapping];

    var record2 = tree.getCurrentViewRecords()[args.dropIndex][tree.idMapping];

    var data = args.data[0];

   

    var position = { dragidMapping: record1, dropidMapping: record2, position: args.dropPosition }; // if you need to update the Row Drag and Drop value at server end you can use ajax post

    args.cancel = true; // setitng args.cancel to true to prevent asynchronous row dd at cient and server end

    const fetch = new Fetch(https://localhost:7297/Home/MyTestMethod, "POST");

    fetch.data=JSON.stringify({ value: data, pos: position });

    fetch.send();

    fetch.onSuccess=  (data:any) => {proxy.refresh(); };

   

}

    return <TreeGridComponent dataSource={dataManager} allowPaging={true} allowRowDragAndDrop={true} idMapping= 'TaskId' loadChildOnDemand={false}

    parentIdMapping='ParentId' rowDrop={rowDrop} hasChildMapping='isParent' editSettings={editsetting}   height='400'

    >

        <ColumnsDirective>

            …

    </TreeGridComponent>

};

export default App;

 

 

HomeController.cs

 

public bool MyTestMethod([FromBody]ICRUDModel value)

        {

            if (value.pos.position == "bottomSegment" || value.pos.position == "topSegment")

            {

                //for bottom and top segment drop position. If the dragged record is the only child for a particular record,

                //we need to set parentItem of dragged record to null and isParent of dragged record's parent to false

                if (value.value.ParentId != null) // if dragged record has parent

                {

                    var childCount = 0;

                    int parent1 = (int)value.value.ParentId;

                    childCount += FindChildRecords(parent1); // finding the number of child for dragged record's parent

                    if (childCount == 1) // if the dragged record is the only child for a particular record

                    {

                        var i = 0;

                        for (; i < TreeGridItems.GetSelfData().Count; i++)

                        {

                            if (TreeGridItems.GetSelfData()[i].TaskId == parent1)

                            {

                                //set isParent of dragged record's parent to false

                                TreeGridItems.GetSelfData()[i].isParent = false;

                                break;

                            }

                            if (TreeGridItems.GetSelfData()[i].TaskId == value.value.TaskId)

                            {

                                //set parentItem of dragged record to null

                                TreeGridItems.GetSelfData()[i].ParentId = null;

                                break;

                            }

 

 

                        }

                    }

                }

                TreeGridItems.GetSelfData().Remove(TreeGridItems.GetSelfData().Where(ds => ds.TaskId == value.pos.dragidMapping).FirstOrDefault());

                var j = 0;

                for (; j < TreeGridItems.GetSelfData().Count; j++)

                {

                    if (TreeGridItems.GetSelfData()[j].TaskId == value.pos.dropidMapping)

                    {

                        //set drgged records parentItem with parentItem of

                        //record in dropindex

                        value.value.ParentId = TreeGridItems.GetSelfData()[j].ParentId;

                        break;

                    }

                }

                if (value.pos.position == "bottomSegment")

                {

                    this.Insert(value, value.pos.dropidMapping);

                }

                else if (value.pos.position == "topSegment")

                {

                    //TreeGridItems.GetSelfData().Remove(TreeGridItems.GetSelfData().Where(ds => ds.TaskId == pos.dragidMapping).FirstOrDefault());

                    this.InsertAtTop(value, value.pos.dropidMapping);

                }

            }

            else if (value.pos.position == "middleSegment")

            {

                TreeGridItems.GetSelfData().Remove(TreeGridItems.GetSelfData().Where(ds => ds.TaskId == value.pos.dragidMapping).FirstOrDefault());

                value.value.ParentId = value.pos.dropidMapping;

                FindDropdata(value.pos.dropidMapping);

                this.Insert(value, value.pos.dropidMapping);

            }

            return true;

        }

 

public ActionResult Update([FromBody] ICRUDModel value)

        {

            var val = TreeGridItems.GetSelfData().Where(ds => ds.TaskId == value.value.TaskId).FirstOrDefault();

            val.TaskName = value.value.TaskName;

            val.Duration = value.value.Duration;

            return Json(val);

 

        }

 

        …

 

 

Please refer to the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Drag_and_drop-44361018

Please refer to the below help documentation,

https://ej2.syncfusion.com/react/documentation/treegrid/row/row-drag-and-drop#drag-and-drop-events

Please refer to the below API documentation,

https://ej2.syncfusion.com/react/documentation/api/treegrid/#refresh

https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdrop

Regards,

Pon selva