Rahul Jain

Rahul Jain

  • 1.6k
  • 118
  • 6.5k

Drag, Drop & Merge Rows @ the Row + Cell Level in Table Grid

Jan 18 2015 10:23 AM
I want to develop Drag & Drop of Rows in Grid. But I need to achieve that @ the Table row + Table Cell level. User being able to select a nested/merge row and drop it. Below is the snapshot of my table. Have a look @ it.
 Snapshot 1
If a user wants to add Row “Doc Type 2” which is currently associated with “Property Two”. User can drag row “Doc Type 2” and drop that row under “Doc Type 3”. This will essentially present the view below to the user.
enter image description here User now has the ability to sort Doc Type 1 and Doc Type 2 for Property Two i.e. User will drag “Doc Type 2” row and drop it over “Doc Type 1” to get the view as shown above :
 
enter image description here 
 

Now I have found that there are lots of Drag & Drop plugins available like Jquery UI Sortable Widget, Jquery UI Dragging & Dropping but they are restricted @ the row level & not @ the cell level.

I have some questions please help me out if possible.

  1. Using Jquery UI Dragging is available @ the row level is possible but how to drag and merge @ the cell level or group of cells and merge it into another row.
Check out the JS Fiddle Here : http://jsfiddle.net/rickjackson/98wtuLbb/2/