Grid Drag Drop between grids

Question

Hi support,I have tried your example to implement drag&drop of rows between two grids.This is working, but unfortunately the user experience is not very good.https://ej2.syncfusion.com/javascript/demos/#/material/grid/drag-and-drop.htmlSeveral issues make it very difficult for the user to perform the drag and drop.1. It is very hard to find a "grip" with the mouse to start dragging.2. No handle is shown where the user can grip the row to start dragging3. The mouse cursor does not change to indicate the possibility of dragging4. The drop target is not indicated with a small red line (like it is done at drag drop within the same grid)Can you please change the layout, so the Drag&Drop between two grids behaves the same way like it is at Drag&Drop within the same grid?Here the user interface is very good and intuitive.Drag&Drop between different grids is a very common pattern at user interfaces and is needed in many cases.So it would be a good idea to improve the layout. Regards,Stephan

Rajapandi Ravi · Answer

Hi Stephan, 

Greetings from syncfusion support 

Query#1&2: It is very hard to find a "grip" with the mouse to start dragging & No handle is shown where the user can grip the row to start dragging  

We have analyzed your query and we could see that you like to display the grip icon which was displayed in the within Grid. For within Grid, You can rearrange the grid rows only by using drag icon in left side of grid column. But for drag and drop with different grid, you can dragging a row by clicking anywhere in your target row. So we cannot maintain a grip icon here. It was the default behavior of our Grid.  

Query#:3: The mouse cursor does not change to indicate the possibility of dragging 

For this query, we have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.   
  
https://www.syncfusion.com/account/login 

Query#:4: The drop target is not indicated with a small red line (like it is done at drag drop within the same grid) 

For this query, we have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.   
  
https://www.syncfusion.com/account/login 

Regards,Rajapandi R

Stephan Schrade · Answer

Many thanks for your reply.Query#1 & #2:Without the handle you first have to select the row before you can drag it.This is different from the behavior which is used to drag&drop within the same grid (with the handle).Here you can just grab the handle without selecting the row.So this will cause confusion to the user.I had the same trouble by myself before I figured out how to drag the row.Many thanks for creating the issues for query #3 and #4.Regards,Stephan

Praveenkumar Gajendiran · Answer

Hi Stephan,Sorry for the delay getting back to youWe checked your query and we would like to inform you that the reported one is the default behavior at our current architecture. So, we suggest you use the following workaround to resolve your problem, 




let grid: Grid = new Grid({ 
  dataSource: orderDetails, 
  allowPaging: true, 
  allowRowDragAndDrop: true, 
  allowSelection: true, 
  editSettings: { allowDeleting: true }, 
  pageSettings: { pageCount: 2 }, 
  width: "40%", 
  columns: [ 
    { 
      field: "OrderID", 
      headerText: "Order ID", 
      width: 120, 
      textAlign: "Right" 
    }, 
    { field: "CustomerName", headerText: "Customer Name", width: 135 }, 
    { 
      field: "OrderDate", 
      headerText: "Order Date", 
      width: 130, 
      format: "yMd", 
      textAlign: "Right" 
    } 
  ], 
  rowDrop: args => {     // rowDrop event which triggers when row elements are dropped. 
    let targetGrid: any = parentsUntil(args.target, "TestGrid", true);  //target element 
    if (targetGrid && targetGrid.id === "TestGrid") { 
      var rowData = grid.getRowInfo(args.rows[0]).rowData; 
      testGrid.trigger("rowDrop", args); 
 
      testGrid.notify("rows-added", { 
        toIndex: (args.target.parentElement as any).rowIndex, 
        records: args.data 
      }); 
      testGrid.notify("model-changed", { 
        type: "actionBegin", 
        requestType: "rowdraganddrop" 
      }); 
      grid.deleteRow(args.rows[0] as any); 
    } 
  } 
}); 
grid.appendTo("#Grid"); 

let testGrid: Grid = new Grid({ 
  dataSource: [], 
  allowPaging: true, 
  allowRowDragAndDrop: true, 
  rowDropSettings: { targetID: "Grid" }, 
  editSettings: { allowEditing: true, allowDeleting: true, allowAdding: true }, 
  pageSettings: { pageCount: 2 }, 
  width: "40%", 
  columns: [ 
    { 
      field: "OrderID", 
      headerText: "Order ID", 
      width: 120, 
      textAlign: "Right" 
    }, 
    { field: "CustomerName", headerText: "Customer Name", width: 135 }, 
    { 
      field: "OrderDate", 
      headerText: "Order Date", 
      width: 130, 
      format: "yMd", 
      textAlign: "Right" 
    } 
  ], 
  rowDrop: args => {} 
}); 
testGrid.appendTo("#TestGrid"); 
We have prepared a sample based on this for your reference, 
Sample: https://stackblitz.com/edit/imezte?file=index.ts 
 
API Link: https://ej2.syncfusion.com/documentation/api/grid#rowdrop 
Please get back to us if you need further assistance.Regards,Praveenkumar G

Stephan Schrade · Answer

Hi support,many thanks for your reply and the workaround.This gives a much better experience to the user.But how can I reorder the items in the target grid (gird on the right hand side)?Is there any possibility to do so?And it would also be good to have the handle (to move the item) on the on the right hand grid as well.Many thanks.Regards,Stephan

Balaji Sekar · Answer

Hi Stephan, 

Thanks for the update. 

Based on your update you have mentioned that you need to reorder the items on right hand side of the Grid. Before proceeding on your query we need to confirm that you want reorder row between Grid to Grid or Grid column reordering option. If we misunderstood your requirement, please share the video demonstration on your requirement to us that will help to validate further. 

Regards, 
Balaji Sekar

Stephan Schrade · Answer

Hi support,I want to have both.I need to Drag&Drop between the two grids. (moving a row from the left grid (source) to the right grid (target))and I also need to reorder the items within the target grid.Regards,Stephan

Praveenkumar Gajendiran · Answer

Hi Stephan,Thanks for your update.Query: “I want to have both. I need to Drag&Drop between the two grids. (moving a row from the left grid (source) to the right grid (target)) and I also need to reorder the items within the target grid.”Based on your query we suscept that you want both behavior (i.e., Drag & Drop between the two grids and also within the same grid) for both left and right Grid. For this we suggest to you use the following workaround to achieve requirement. 




let grid: Grid = new Grid({ 
  dataSource: orderDetails, 
  allowPaging: true, 
  allowRowDragAndDrop: true, 
  allowSelection: true, 
  editSettings: { allowDeleting: true }, 
  pageSettings: { pageCount: 2 }, 
  width: "40%", 
  columns: [ 
    { 
      field: "OrderID", 
      headerText: "Order ID", 
      width: 120, 
      textAlign: "Right" 
    }, 
    { field: "CustomerName", headerText: "Customer Name", width: 135 }, 
    { 
      field: "OrderDate", 
      headerText: "Order Date", 
      width: 130, 
      format: "yMd", 
      textAlign: "Right" 
    } 
  ], 
  rowDrop: args => { 
    let targetGrid: any = parentsUntil(args.target, "TestGrid", true); 
    if (targetGrid && targetGrid.id === "TestGrid") { 
      var rowData = grid.getRowInfo(args.rows[0]).rowData; 
      testGrid.trigger("rowDrop", args); 
 
      testGrid.notify("rows-added", { 
        toIndex: (args.target.parentElement as any).rowIndex, 
        records: args.data 
      }); 
      testGrid.notify("model-changed", { 
        type: "actionBegin", 
        requestType: "rowdraganddrop" 
      }); 
      setTimeout( 
        function() { 
          grid.deleteRow(args.rows[0] as any); 
        }.bind(this), 
        50 
      ); 
    } 
  } 
}); 
grid.appendTo("#Grid"); 

let testGrid: Grid = new Grid({ 
  dataSource: [], 
  allowPaging: true, 
  allowRowDragAndDrop: true, 
  editSettings: { allowEditing: true, allowDeleting: true, allowAdding: true }, 
  pageSettings: { pageCount: 2 }, 
  width: "40%", 
  columns: [ 
    { 
      field: "OrderID", 
      headerText: "Order ID", 
      width: 120, 
      textAlign: "Right" 
    }, 
    { field: "CustomerName", headerText: "Customer Name", width: 135 }, 
    { 
      field: "OrderDate", 
      headerText: "Order Date", 
      width: 130, 
      format: "yMd", 
      textAlign: "Right" 
    } 
  ], 
  rowDrop: args => { 
    let targetGrid2: any = parentsUntil(args.target, "Grid", true); 
    if (targetGrid2 && targetGrid2.id === "Grid") { 
      var rowData = testGrid.getRowInfo(args.rows[0]).rowData; 
      grid.trigger("rowDrop", args); 
 
      grid.notify("rows-added", { 
        toIndex: (args.target.parentElement as any).rowIndex, 
        records: args.data 
      }); 
      grid.notify("model-changed", { 
        type: "actionBegin", 
        requestType: "rowdraganddrop" 
      }); 
      setTimeout( 
        function() { 
          testGrid.deleteRow(args.rows[0] as any); 
        }.bind(this), 
        50 
      ); 
    } 
  } 
}); 
testGrid.appendTo("#TestGrid"); 

We have prepared a sample based on this for your reference, 
Sample: https://stackblitz.com/edit/imezte-zri7gt?file=index.tsOr If you want to reorder the items only within the grid for the second grid (i.e., right grid (target) ). For this we suggest to remove the rowDropSettings.targetID in the second Grid to achieve your requirement.Please refer the below sample and code example for more information. 




let grid: Grid = new Grid({ 
  dataSource: orderDetails, 
  allowPaging: true, 
  allowRowDragAndDrop: true, 
  allowSelection: true, 
  editSettings: { allowDeleting: true }, 
  pageSettings: { pageCount: 2 }, 
  width: "40%", 
  columns: [ 
    { 
      field: "OrderID", 
      headerText: "Order ID", 
      width: 120, 
      textAlign: "Right" 
    }, 
    { field: "CustomerName", headerText: "Customer Name", width: 135 }, 
    { 
      field: "OrderDate", 
      headerText: "Order Date", 
      width: 130, 
      format: "yMd", 
      textAlign: "Right" 
    } 
  ], 
  rowDrop: args => {     // rowDrop event which triggers when row elements are dropped. 
    let targetGrid: any = parentsUntil(args.target, "TestGrid", true);  //target element 
    if (targetGrid && targetGrid.id === "TestGrid") { 
      var rowData = grid.getRowInfo(args.rows[0]).rowData; 
      testGrid.trigger("rowDrop", args); 

      testGrid.notify("rows-added", { 
        toIndex: (args.target.parentElement as any).rowIndex, 
        records: args.data 
      }); 
      testGrid.notify("model-changed", { 
        type: "actionBegin", 
        requestType: "rowdraganddrop" 
      }); 
     setTimeout( function() { 
          grid.deleteRow(args.rows[0] as any); 
        }.bind(this), 50 ); 
    } 
  } 
}); 
grid.appendTo("#Grid"); 

let testGrid: Grid = new Grid({ 
  dataSource: [], 
  allowPaging: true, 
  allowRowDragAndDrop: true, 
  rowDropSettings: { targetID: "Grid" }, 
  editSettings: { allowEditing: true, allowDeleting: true, allowAdding: true }, 
  pageSettings: { pageCount: 2 }, 
  width: "40%", 
  columns: [ 
    { 
      field: "OrderID", 
      headerText: "Order ID", 
      width: 120, 
      textAlign: "Right" 
    }, 
    { field: "CustomerName", headerText: "Customer Name", width: 135 }, 
    { 
      field: "OrderDate", 
      headerText: "Order Date", 
      width: 130, 
      format: "yMd", 
      textAlign: "Right" 
    } 
  ], 
  rowDrop: args => {} 
}); 
testGrid.appendTo("#TestGrid"); 
Sample: https://stackblitz.com/edit/imezte-fxefl1?file=index.tsAPI Link: https://ej2.syncfusion.com/documentation/api/grid#rowdrop 
Please get back to us if you need further assistance.Regards,Praveenkumar G

Aijda · Answer

No, BetAndreas is not available in all countries due to legal restrictions and regulations. The site does not operate in countries where online gambling is prohibited or restricted.