AG-Grid data update after drag & drop

Question

I'm new to AG-Grid and I'm trying to use it inside my Vue app. I'm try to figure out why, after a drag&drop event, the data doesn't get update. I created a little example here: https://plnkr.co/edit/vLnMXZ5y1VTDrhd5

import Vue from 'vue';
import { AgGridVue } from '@ag-grid-community/vue';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';

const VueExample = {
  template: `
        <div style="height: 100%">
            <button @click="logData">Log data</button>
            <ag-grid-vue
                style="width: 100%; height: 100%;"
                class="ag-theme-alpine"
                id="myGrid"
                :gridOptions="gridOptions"
                @grid-ready="onGridReady"
                :columnDefs="columnDefs"
                :defaultColDef="defaultColDef"
                :rowDragManaged="true"
                :animateRows="true"
                :modules="modules"
                :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    'ag-grid-vue': AgGridVue,
  },
  data: function () {
    return {
      gridOptions: null,
      gridApi: null,
      columnApi: null,
      columnDefs: null,
      defaultColDef: null,
      modules: [ClientSideRowModelModule],
      rowData: null,
    };
  },
  beforeMount() {
    this.gridOptions = {};
    this.columnDefs = [
      {
        field: 'Month',
        rowDrag: true,
      },
      { field: 'Max temp (C)' },
      { field: 'Min temp (C)' },
      { field: 'Days of air frost (days)' },
      { field: 'Sunshine (hours)' },
      { field: 'Rainfall (mm)' },
      { field: 'Days of rainfall >= 1 mm (days)' },
    ];
    this.defaultColDef = {
      width: 100,
      sortable: true,
      filter: true,
    };
  },
  mounted() {
    this.gridApi = this.gridOptions.api;
    this.gridColumnApi = this.gridOptions.columnApi;
  },
  methods: {
    logData() {
      this.rowData.forEach(function(item) {
        console.log(item.Month);
      });
    },

    onGridReady(params) {
      const httpRequest = new XMLHttpRequest();
      const updateData = (data) => {
        this.rowData = data;
      };

      httpRequest.open(
        'GET',
        'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/weather_se_england.json'
      );
      httpRequest.send();
      httpRequest.onreadystatechange = () => {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
          updateData(JSON.parse(httpRequest.responseText));
        }
      };
    },
  },
};

new Vue({
  el: '#app',
  components: {
    'my-component': VueExample,
  },
});

if you click on the "Log data" button you can see in console that data isn't updated in sync with the view. How can I do that? Thank you!

Answer 1

I found a solution adding a @row-drag-end="rowDragEnd" event; I updated the example here: https://plnkr.co/edit/vLnMXZ5y1VTDrhd5

<ag-grid-vue
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine"
    id="myGrid"
    :gridOptions="gridOptions"
    @grid-ready="onGridReady"
    :columnDefs="columnDefs"
    :defaultColDef="defaultColDef"
    :rowDragManaged="true"
    @row-drag-end="rowDragEnd"
    :animateRows="true"
    :modules="modules"
    :rowData="rowData"></ag-grid-vue>

rowDragEnd: function(event) {
  var itemsToUpdate = [];

  this.gridApi.forEachNodeAfterFilterAndSort(function (rowNode) {
    itemsToUpdate.push(rowNode.data);
  });

  this.rowData = itemsToUpdate;
},

Answer 2

According to this page, changing the row order in the grid will not change the rowData order.

If you want to log the order of months as they are in the grid, you may use this.gridApi.forEachNode(node, index), as described in State 3 of the same page. You can write your logData() method like this:

logData() {
  this.gridApi.forEachNode(node => console.log(node.data.Month));
}