Custom buttons to move selected row up and down

[Sanjay Singh]

Hello,

How can we add custom buttons on the Grid toolbar and use the same to move a selected row up and down in grid.

Thanks,

Sanjay

[Joseph Christ Nithin Issack]

Hi Sanjay,

  Greetings from Syncfusion support.

In EJ2 grid you can only be able to move the rows in the UI level only. To change the order of the rows you can use the `reorderRows` Method of the EJ2 Grid. Please refer the below api documentation to know more about row reordering.

Api Link: https://ej2.syncfusion.com/documentation/api/grid#reorderrows.

We would like you to provide the following information so that we may be able to help you more.

• Please share your exact requirement, why do you want to swap the order of the rows?

Regards,

Joseph I.

[Sanjay Singh]

Hello,

What do you mean by "UI level only"...?

Here is the exact requirement.

We have a grid with toolbar buttons "ADD", "UPDATE","DELETE","CANCEL"

We Add a new row using ADD button and add data to the newly added row.

Now after adding multiple rows we want to move these rows up and down.

We want to swap rows like we do using drag and drop. But in our case we want to move them using buttons.

I hope this make sense.

Let me know if additional information is required.

Thanks,

Sanjay

[Sanjay Singh]

Hello Team,

Any update...?

[Joseph Christ Nithin Issack]

Hi Sanjay,

  Based on your requirement, you want to move the rows up or down on a button click. We have prepared a sample to meet your requirement. Please refer the below sample.

Sample: https://stackblitz.com/edit/react-djfjmu-zgmrvk?file=index.js

[Sanjay Singh]

Hello, 

This solution is for React.

I have raised the query for Angular.

Also is it possible to have up/down buttons on toolbar, not on each row.?

Thanks,

Sanjay

[Joseph Christ Nithin Issack]

Hi Sanjay,

  Before proceeding to the sample, please share the details below.

• Do you want to move the selected row up/down, while clicking on the toolbar button?
• Do you want to move single row or multiple rows?

[Sanjay Singh]

Hello,

Please find answers below.

• Do you want to move the selected row up/down, while clicking on the toolbar button? - Yes we need up/down button on toolbar and selected row should move up and down on clicking them

• Do you want to move single row or multiple rows?- Single row

[Joseph Christ Nithin Issack]

Hi Sanjay,

   Based on your query, you want to move the selected row up or down on a button click. Your requirement can be achieved using the toolbarClick event of the
EJ2 Grid.

Please refer the below code example:

 

 

  toolbarClick(args) {

    if (this.grid.getSelectedRows().length > 0) {

      var selectedRow = this.grid.getSelectedRows()[0];

      var index = selectedRow.rowIndex;

      if (args.item.id == 'moveup') {

        if (index > 0) {

          this.grid.reorderRows([index], index - 1);

        }

      } else if (args.item.id == 'movedown') {

        if (index < this.grid.currentViewData.length) {

          this.grid.reorderRows([index], index + 1);

        }

      }

    }

  }

 

Sample: https://stackblitz.com/edit/angular-nuyn9e?file=src%2Fapp.component.html,src%2Fapp.component.ts

[Sanjay Singh]

Thank you, this solution works.

One additional question, how can I add up and down arrow icons to the buttons

[Sanjay Singh]

Hi Team,

Any Update.?

Thanks,

Sanjay

[Joseph Christ Nithin Issack]

Sanjay,

  Based on your query, you want to add the icons to the toolbar item of the EJ2 Grid. Your requirement can be achieved using the ‘prefixIcon’ or the ‘suffixIcon’ property of the toolbar items.

Please refer the below api links.

https://helpej2.syncfusion.com/angular/documentation/api/toolbar/itemModel/#prefixicon