Save row order after row drag/drop in Grid Batch editing mode

[Tera P Keplinger]

Hi,

I am using Grid with Batch mode editing (only allows editing on some columns but no addition or deletion of rows) and has pagination, row drag and drop enabled.

The ordering of rows on the screen is important to my use case, and are sorted on a data field "rowOrder" by default (hidden column). When the user moves the rows around, I want to be able to update the rowOrder for all the rows on the grid, and send the new values back for the update. The new rowOrder field would essentially be the rowIndex on the grid.

Couple of things here:

1. I am able to set the values for "rowOrder" column on the current page only using grid.getCurrentViewData and grid.updateCell() . Is there a way to set it for the entire data set across multiple pages?
2. I am currently doing grid.updateCell() in beforebatchsave event. I tried to do that in rowDrop event but because I have this snippet in my grid for the running total on a field https://stackblitz.com/edit/1vrjig-fg1m5m?file=index.js,index.html I get an error when I try to make updates to the "rowOrder" field on the rowDrop event. And because I am doing it this way, the "Update" button in the toolbar does not get enabled. I also tried document.getElementById("Grid_update").disabled=false on rowDrop event but didn't help. There could be some cases where user only wants to edit the row order and save them but doesn't want to make any updates to the field columns.

Can you please help?

Thanks!

[Vinitha Balasubramanian]

Hi Tera,

Greetings from Syncfusion support.

Currently, we are validating your query “Save row order after row drag/drop in Grid Batch editing mode” with shared information. We will update further details on or before 10^th October 2022.

Until then, we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Hi Tera,

Thanks for your patience.

Query 1 : Is there a way to set it for the entire data set across multiple pages?

We have analyzed your query, we need some more information for our clarification. Before we start providing solution to your query,  kindly share the below details that will be helpful for us to provide better solution.

• Kindly share why should you want to update the values of next pages because by default we can update the values only for current view data.
• Ensure the exact purpose of rowOrder while performing row drag and drop.

Query 2 : To updates to the field columns while performing row drag and drop.

We have prepared a simple sample to achieve your requirement using setCellValue method and rowDrop event of Grid component. Kindly refer the below code and sample for more information.

[index.js]

function rowDrop(e) {

  setTimeout(() => {

    for (let i = e.fromIndex; i <= e.dropIndex; i++) {

      console.log(grid.getRowInfo(grid.getRowByIndex(i)));

      grid.setCellValue(

        grid.getRowInfo(grid.getRowByIndex(i)).rowData['slNo'],

        'rowIndex',

        i + 1

      );

    }

    grid.refresh();

  }, 10);

  setTimeout(() => {

    for (let i = e.dropIndex; i <= e.fromIndex; i++) {

      console.log(grid.getRowInfo(grid.getRowByIndex(i)));

      grid.setCellValue(

        grid.getRowInfo(grid.getRowByIndex(i)).rowData['slNo'],

        'rowIndex',

        i + 1

      );

    }

    grid.refresh();

  }, 10);

}

Sample : https://stackblitz.com/edit/xxwq8z?file=index.js%3AL85,index.html

Regards,

Vinitha Balasubramanian

[Tera P Keplinger]

Hi Vinitha,

Thanks for you response. 

• Kindly share why should you want to update the values of next pages because by default we can update the values only for current view data.
  • The scenario is we have records on the Grid UI (batch mode editing allowed) that are sorted in their priority order which is basically a number in one of the database column "rowOrder" or you can call it "priorityOrder". This is a hidden column on the Grid for the user. Initially, when the records are imported afresh (and they could be on multiple pages) for the first time, they all have the rowOrder as 0. The user then uses the Grid's Row drag and drop feature and moves around the records as needed.  (I understand that a user can't move the records across pages and that's okay. The user can choose page size as "All" if there's such a need). When the user is done moving the records, we want the value for the rowOrder to be same as the row Index for that row in the grid and update that in the backend, so that when records are loaded next time in the Grid, the user sees the same order that they saved. This will involve updating the rowOrder/priorityOrder field for the records on the other pages as well. 
• Ensure the exact purpose of rowOrder while performing row drag and drop.
• Consider it one of the data element in the JSON data that we are using to populate the grid. This is basically the field that determines the priority/ordering of records on the screen for us. The data on screen is sorted by this field. This is same as 'slNo' field in your example, just that in my case, it is not a primary key field, and will have '0' for all rows when loaded for the first time.
• The example shared would work well if 'slNo' is already in a sequence, which is not the case with my data where I get all zeros to begin with. Also, the "Update" button in the toolbar is not getting activated to save the new data.

Please let me know for any additional details needed. Thanks for looking into this!

[Vinitha Balasubramanian]

Hi Tera,

Thanks for your update.

Currently, we are validating your reported problem with your shared information, and we will update you the details on or before 14^th Oct 2022. Until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Hi Tera,

Thanks for your patience.

We have analyzed your shared information, we need some more information for our clarification. Before we start providing solution to your query,  kindly share the below details that will be helpful for us to provide better solution.

• On your last update, you have mentioned that all rowOrder value be 0, kindly ensure that whether you want to update the rowOrder value at initial Grid rendering.
• Also ensure that, on which Grid action like pagination, row drag and drop you want to update the rowOrder value.
• Kindly share the type of data binding you are using in Grid component.

Regards,

Vinitha Balasubramanian

[Tera P Keplinger]

Hi Vinitha,

Thank you for your response. 

1. We would like to update the rowOrder only when user does the row drag and drop, and not at the initial rendering.
2. The goal is to have the new ordering sequence be sent back when user clicks the update button. So any grid action - rowDrop or pagination or any thing before hitting the final update button is fine as long as we are able to send all the new "rowOrderdata" to the backend from all the pages  using  grid.getBatchChanges().changedRecords
3. We are using local data binding. 

Please let me know for any additional details needed.

Thanks!

[Vinitha Balasubramanian]

Hi Tera,

Thanks for your update.

Currently, we are validating your reported problem with your shared information, and we will update you the details on or before 20^th Oct 2022. Until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Hi Tera,

Thanks for your patience.

We have prepared a sample to update the rowOrder for the entire dataSource using rowDrop event of Grid component. Kindly refer the below code and sample for your reference.

[index.js]

 

function rowDrop(e) {

setTimeout(

    function () {

      for (var i = 0, len = this.dataSource.length; i < len; i++) {

        this.dataSource[i].rowOrder = i + 1;

      }

      this.refresh();

    }.bind(this),

    100

  );

}

Sample: https://stackblitz.com/edit/xxwq8z-ivbtta?file=index.js,index.html

Please get back to us if you need further assistance.

Regards,

Vinitha Balasubramanian

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Tera P Keplinger]

Hi Vinitha,

Thank you for your response. We also have editing enabled in the grid as I mentioned earlier. If I add the following to the example above, 

editSettings: { showConfirmDialog: false, allowEditing: true, allowAdding: false, allowDeleting: false, mode: 'Batch' },

toolbar: ['Update', 'Cancel'],

the 'Update' button in the toolbar does not get enabled for me on the rowDrop. I tried enabling the same in the rowDrop method via following but didn't help.

grid.toolbarModule.enableItems(['Grid_update'],true);

Also, the changes should get passed to the backend with other changes via :

grid.getBatchChanges().changedRecords

Thanks!

[Rajapandi Ravi]

Hi Tera,

Greetings from Syncfusion support

In our previous update, we have updated the data directly to the datasource and achieved your requirement. Now you are enabling editing in the Grid and and like to perform the rowDrop and maintain the row order. Before we start providing solution to your query, please share the below details that will be helpful for us to provide better solution.

1)               Share your exact requirement step by step with detailed description.

2)               Share type of data binding used(local data or remote data).

3)               If remote, please share what adaptor you are using in your application.

4)               Please confirm you like to update the rowOrder using batch editing.

5)               Please confirm using batch editing you like to update the row order value on row drop for all page or current page alone, because the batch editing sends the modified data to the backend

                   only for the current page alone.

Regards,

Rajapandi R