How persist row reordering to db (REACT)

[Ericsson Martins]

Hello,

  Is there any way to persist row Grid reordering? Im asking because I have dragAndDrop feature enable, and the user ll playaround with my Grid, and I couldnt identify ways to persist that.

  With this function Im able to persist filters, columns position and others, but not row reordering...

    async persistData() {

    let gridInst = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

    let persistData = gridInst.getPersistData();

    let data = JSON.stringify(persistData);

    window.localStorage.setItem('gridPersistData', data);

    console.log('persistData: ', JSON.parse(persistData));

  }

  and with this code I can load the filters information:

  

async getData() {

    let gridInst = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

    let getPersistedData = JSON.parse(window.localStorage.getItem('gridPersistData'));

    let data = JSON.parse(getPersistedData);

    console.log('GetData: ', data);

    if (data) {

      gridInst.setProperties(

        {

          sortSettings: { columns: data.sortSettings.columns },

          filterSettings: data.filterSettings,

          pageSettings: {

            pageSize: data.pageSettings.pageSize,

            currentPage: data.pageSettings.currentPage,

            pageCount: data.pageSettings.pageCount,

          },

          searchSettings: { fields: data.searchSettings.fields, key: data.searchSettings.key },

        },

        true

      );

      gridInst.setProperties({

        groupSettings: { columns: data.groupSettings.columns },

        columns: data.columns,

      });

    }

    gridInst.refresh();

  }

my code is attached.

I apreciate your support :) 

Attachment: persistgrid.jsx_a1e9ceee.zip

[Sujith Kumar Rajkumar]

Hi Ericsson, 

 

Greetings from Syncfusion support. 

 

Based on the query we would like to let you know that the EJ2 Grid persists only the following - Columns, FilterSettings, SearchSettings, SortSettings,  GroupSettings, PageSettings etc. It does not persist the changed row index when the Row Drag and Drop action is performed in Grid. This is the default behaviour of persistence in EJ2 Grid. 

 

More details on persistence can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/state-persistence/  

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Ericsson Martins]

Hi Sujith, thanks a lot for your answer :)

But somehow we have some options to achieve that?

Im asking because, I found this web site reference using RowDropMapper: https://www.syncfusion.com/forums/140524/persist-row-reordering-to-db

But I didnt understant how to use or how to apply that on my React solution.

I apreciate your support

[Balaji Sekar]

Hi Ericsson, 

 

Thanks for your update. 

 

we have validated your requirement. By default, row drag and drop feature does not support for remote data so we suggest you to use the below way to achieve your requirement. 

 

You can bind the rowDrop event and send the ajax post and perform the reordering in server side based on the rowDrop event arguments(from and drop index). You can also swap the data in server side and refresh the grid to achieve your requirement. 

 

Please refer the below code example for more information. 

 

 

export class DragWithGrid extends SampleBase{ 

   rowDrop(args) { 

 

        var grid = document.getElementByID('DestGrid').ej2_instances[0]; 

        args.cancel = true; 

        let ajax = new ej.base.Ajax(); 

        ajax.type = "POST" 

        ajax.url = "Home/Move" 

        let moveposition = { oldIndex: args.fromIndex, data: args.data, newIndex: args.dropIndex }; 

        ajax.data = JSON.stringify(moveposition); 

        ajax.send(); 

        ajax.onSuccess = () => { 

            grid.refresh();  // refresh the Grid 

        } 

    }    

render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <GridComponent 

            dataSource={orderDetails} 

            rowDrop={this.rowDrop.bind(this)} 

            allowRowDragAndDrop={true} 

            height="400" 

            selectionSettings={{ type: "Multiple" }} 

          > 

            <ColumnsDirective> 

           .      .      .      . 

            </ColumnsDirective> 

            <Inject services={[RowDD, Selection]} /> 

          </GridComponent> 

} 

 

Server side: 

 public void move([FromBody]values data) 

        { 

            // you can also change the position of your data based on the from and drop index  

            var tmp = OrdersDetails.GetAllRecords()[data.oldIndex];  

            OrdersDetails.GetAllRecords()[data.oldIndex] = OrdersDetails.GetAllRecords()[data.newIndex];  

            OrdersDetails.GetAllRecords()[data.newIndex] = tmp;  

 

        } 

 

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

 

Regards, 

Balaji Sekar