1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Grid row item, drag and drop into another(ListBox) control

Grid row item, drag and drop into another(ListBox) control

Hi Team,

Hope all good.

I want, drag the Grid row item and drop that row item into ListBox control in-order to display the drag item column (OrderID) in ListBox control. I've tried but can't able to achieve.

https://stackblitz.com/edit/vn1h13-bymfoy?file=index.js


3 Replies
SK Sujith Kumar Rajkumar Syncfusion Team September 27, 2021 12:35 PM UTC

Hi Durai, 
 
Greetings from Syncfusion support. 
 
Based on the query we could understand that your requirement is to perform drag and drop from Grid to list-box. Since the drag and drop needs to be performed from Grid to another component, this requirement can be achieved by using the list-box’s addItems method to add the dropped records in list box and Grid’s deleteRecord method to remove the dropped records from the Grid. This can be done in the Grid’s rowDrop event(where the dropped records are returned as event arguments) as demonstrated in the below code snippet, 
 
// Grid’s rowDrop event handler 
function onRowDrop(args) { 
     // Check if the drop target is list box 
  if (args.target.closest('.e-listbox-wrapper')) { 
        // Dropped item/items are added to the list box component 
        listObj.addItems(args.data); 
        // Dropped item/items are removed from the Grid 
        args.data.forEach(dat => { 
            grid.deleteRecord('OrderID', dat); 
        }) 
   } 
} 
  
We have modified the shared sample based on this for your reference. You can find it below, 
 
 
Note: For performing delete action in the Grid, you need to enable its allowDeleting property from the editSettings and define a unique primary key column. More details on this can be checked in the below documentation link, 
 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


DU Durai replied to Sujith Kumar Rajkumar October 7, 2021 05:19 PM UTC

Hi Sujith,

Thanks for your wonderful explanation. Hats off....

I have some more queries.

Query 1:

While drag and drop, I don't want the record to be deleted in Grid Control. Instead of delete I need, it to be disable the row. That means, if drag the row from grid to list box I want that the row in grid to be disabled instead of delete.

Take your example which is given in the previous response. And follow the below steps

Step 1: Drag the row from grid to list box
Actual: Note that item is deleted in grid.
Expected: That item need to be disabled.

Query 2:

I need to show below icon also! while doing the drag and drop between the list box and grid control.   



Regards,
Ramesh


SK Sujith Kumar Rajkumar Syncfusion Team October 8, 2021 12:42 PM UTC

Hi Durai, 
 
You’re welcome. Please find the response for your last updated queries below, 
 
Query – 1: “That means, if drag the row from grid to list box I want that the row in grid to be disabled instead of delete.” 
 
You can achieve this requirement by adding the ‘e-disabled’ class too the dropped Grid row elements and removing the code for deleting records as demonstrated in the below code snippet, 
 
// Grid’s rowDrop event handler 
function onRowDrop(args) { 
    if (args.target.closest('.e-listbox-wrapper')) { 
        listObj.addItems(args.data); 
        args.rows.forEach(ele => { 
            // The ‘e-disabled’ class will add disabled effect to the elements 
            // This is added to all the dropped rows 
            ele.classList.add('e-disabled'); 
        }) 
    } 
} 
 
And you can prevent consecutive drag action from being performed on this disabled row by cancelling the selection action in the rowSelecting event(by setting its ‘cancel’ arguments property as false) as demonstrated in the below code snippet, 
 
// Grid’s rowSelecting event handler 
function onRowSelecting(args) { 
    // The row selection is cancelled if the selected row element has ‘e-disabled’ class 
    if (!args.row.length && args.row.classList.contains('e-disabled')) { 
        args.cancel = true; 
    } else if (args.row.length) { 
        args.row.forEach(ele => { 
            if (ele.classList.contains('e-disabled')) { 
                args.cancel = true; 
            } 
        }) 
    } 
} 
 
 
Query – 2: “I need to show below icon also! while doing the drag and drop between the list box and grid control.” 
 
Based on this query we would like to let you know that the drag icon will be displayed only when drag and drop within Grid is enabled. This is the default behavior. However you can render this icon on the Grid rows for your case by using the column template functionality. Using this you can define the drag icon div element as demonstrated in the below code snippets, 
 
index.html 
<script id="iconTemp" type="text/x-template"> 
   <div class="e-icons e-rowcelldrag e-dtdiagonalright e-icon-rowdragicon"></div> 
</script> 
  
index.js 
columns: [ { headerText: 'Drag icon', template: '#iconTemp', width: 100 }, ...] 
 
Note: Since this is a custom icon is rendered using template, the drag action will be performed like before(by dragging from any cell). 
 
We have modified the previously shared sample based on the above queries for your reference. You can find it below, 
 
 
More details on the column template can be checked in the below documentation link, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon