Drag and drop rows within grid to reorder rows

[Justin Wells]

Question is in the title. I've seen this done within the Angular ej2 grid here https://ej2.syncfusion.com/angular/demos/#/material/grid/drag-drop-within-grid. So is there a way to replicate this in vue?

[Shalini Maragathavel]

Hi Justin,  

Thanks for contacting Syncfusion support.

Based on your query we have prepared sample for drag and drop the row within the Grid in Vue platform. So, please refer the code Example  and sample for your reference  

Code Example: 

  

<template> 

    <div> 

      <ejs-grid 

        ref="grid" 

        :dataSource="data" 

        :editSettings="editSettings" 

        :allowSelection="true" 

        :allowRowDragAndDrop="true" 

        :selectionSettings="selectionOptions" 

        height="410px" 

      > 

        <e-columns> 

          .. . 

        </e-columns> 

      </ejs-grid> 

     

</template> 

<script> 

import Vue from "vue"; 

export default { 

  data: function () { 

    return { 

      data: data, 

      selectionOptions: { type: "Multiple" }, 

    }; 

  }, 

  methods: {}, 

  provide: { 

    grid: [RowDD, Selection], 

  }, 

}; 

</script> 

 

Please refer the below sample for your reference. 

Sample: https://codesandbox.io/s/297565-edit-in-single-click-forked-f6hln?file=/src/App.vue 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/row/#drag-and-drop

Demo: https://ej2.syncfusion.com/vue/demos/#/material/grid/drag-and-drop-within-grid.html 

Please get back to us if you need further assistance. 

Regards, 

Shalini M. 

[Justin Wells]

Hey thanks for response works great. Just one additional question would it be possible to also add up and down arrows to the side of each row? So that you could shift that row up and down with those controls?

[Shalini Maragathavel]

Hi Justin, 

Thanks for your update. 

Based on your query you need to add up and down arrows to the side of each row to shift that row up and down with those controls. By default in EJ2 Grid when we enable the row drag and drop within the grid the icon will be display to drag the row up and down.  

So, Please share us the following information to understand your requirement better, 

1. Do you wish to replace the rowdrag icon as up and down arrows?

 

2. Elaborate on the requirement. 

3. Share us a pictorial representation of the requirement. 

 

Let us know if you have any concerns. 

Regards, 

Shalini M. 

[Justin Wells]

I still wanna to have the row drag and drop. Just on top of that I want add arrows to the side of each row. When you click a up arrow the row is moved up when you click down arrow the row is moved down. I attached an example image of what I mean.

Attachment: Example_e1e230b7.7z

[Shalini Maragathavel]

Hi Justin, 

Thanks for your patience. 

Based on your query we suspect that you want to reorder rows using up and down arrow keys. You can achieve your requirement using reorderRows() method of Grid as demonstrated in the below code snippet,  

 

app.component.ts 

<div class="control-section"> 

              <ejs-grid #grid [dataSource]="data" [allowRowDragAndDrop]='true' (commandClick)='commandClick($event)'> 

                             <e-columns> 

                                            

                                           <e-column headerText="Manage Records" width="160" [commands]="commands"></e-column> 

                             </e-columns> 

              </ejs-grid> 

</div>
-----------------------------------------------------------
app.component.ts

export class AppComponent { 

   

  ngOnInit(): void { 

    this.data = employeeData; 

    this.commands = [ 

      { 

        title: "up", 

        buttonOption: { cssClass: "e-flat", iconCss: "e-icons e-up" } 

      }, 

      { 

        title: "down", 

        buttonOption: { cssClass: "e-flat", iconCss: "e-icons e-down" } 

      } 

    ]; 

  } 

  commandClick(args) { 

     

    var oID = []; 

    var currentIndex = parseInt( 

      args.target.closest("tr").getAttribute("aria-rowindex")   

    );  // to get the current row index 

    oID.push(currentIndex); 

 

    if (args.commandColumn.title == "up" && currentIndex != 0) { 

      this.grid.reorderRows(oID, currentIndex - 1);  

    } 

    if (args.commandColumn.title == "down") { 

      this.grid.reorderRows(oID, currentIndex + 1); 

    } 

  } 

} 

   

Please find the  below sample for more information. 

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

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

Please get back to us if you need further assistance. 

Regards, 

Shalini M. 

[Justin Wells]

Thanks for the help I got it working

[Shalini Maragathavel]

Hi Justin, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

Please get back to us, if you need any further assistance. 

Regards, 

Shalini M.