Lock x axis on row drag

[Remy]

Dear Syncfusion Team,

I would like to be able to lock the x axis when dragging a row to re-order the table. Here is an example of the desired result using the Angular Material Table Library.

Query 1 :
How can I achieve the same result using your grid component?

Query 2 :
How can I make the row drag element not shrink, but make it take the entire width keeping the same row style?

Currently when triggering a drag event, the draggable element looks like this :

I want it to look like this :

Thank you,
Remy

[Sujith Kumar Rajkumar]

Hi Remy, 

 

Greetings from Syncfusion support. 

 

Please find the response for your queries below, 

 

Query – 1: “I would like to be able to lock the x axis when dragging a row to re-order the table” 

 

You can achieve this requirement by setting the ‘axis’ property as ‘y’ for the Grid’s draggable module property. This can be done in the Grid’s created event handler as demonstrated in the below code snippet, 

 

// Grid’s created event handler 

onCreated() { 

    this.gridObj.rowDragAndDropModule.draggable.axis = 'y'; 

} 

 

Query – 2: “How can I make the row drag element not shrink, but make it take the entire width keeping the same row style?” 

 

You can achieve this requirement of showing the dragged clone element based on the row element size by setting the height and width of the target row element’s children to the dragged clone element’s children in the Grid’s rowDrag event handler. 

 

This is demonstrated in the below code snippet, 

 

// Grid’s rowDrag event handler 

onRowDrag(args) { 

  let draggedClone = (this.gridObj.rowDragAndDropModule as any).startedRow; 

  let targetRow = (this.gridObj.rowDragAndDropModule as any).rows[0]; 

  // Dragged clone element’s children nodes 

  let draggedChildNodes = draggedClone.childNodes; 

  // Target row element’s children nodes 

  let targetChildNodes = targetRow.childNodes; 

  targetChildNodes.forEach( (ele, index) => { 

    // Target child node position is retrieved 

    let posStyle = ele.getBoundingClientRect(); 

    // Target child node’s width and height is set as the dragged child node’s width and height 

    draggedChildNodes[index].style.width = posStyle.width.toString() + "px"; 

    draggedChildNodes[index].style.height = posStyle.height.toString() + "px"; 

  }) 

} 

 

We have prepared a sample based on the above queries for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/angular-ijyy3g?file=app.component.ts 

 

API link: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowdrag 

                https://ej2.syncfusion.com/angular/documentation/api/grid/#created 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Remy]

Hi Sujith,

Thanks, that worked great. However I am still wondering how I can have the items moving around as I drag a row instead of only showing a line indicating the  "targeted drop row". Is there a way to achieve this? Here is an example of the desired effect when dragging a row (the other rows move to make room for the dragged row, even before dropping it).

Thank you

Remy

[Sujith Kumar Rajkumar]

Hi Remy, 

 

We are not able to clearly understand your requirement from the provided information and the shared image link is showing as invalid, 

 

 

 

So can you please elaborate on your requirement with pictorial or video demonstration of your desired result to validate further on this. 

 

Regards, 

Sujith R 

[Remy]

Hi Sujith,

Sorry about that. Here is a representation of what I am seeking.

In short, as I drag a row, the other rows move (with animations) to make room for the row being dragged, hence giving a better visualization to the user of where exactly the row will be positioned in the grid after being dropped.

Regards,

R

[Sujith Kumar Rajkumar]

Hi Remy, 

 

Thanks for sharing the details. Based on this we would like to let you know that the cloned node of the dragged row along with this its drop target position will only be shown on performing Grid drag and drop action. And for multiple dragged nodes, the dragged node count will be displayed along with this. This is the default behavior of the Grid based on its current architecture. 

 

So if you need to achieve your requirement, then you would have to use the Grid’s rowDrag event(where the dragged clone node can be retrieved) and implement your required custom animation action there. 

 

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowdrag 

 

Regards, 

Sujith R