Flexmonster on datachanged

by maura_piredda

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<button id="button">Save</button>
<div id="saved-data">Saved data: </div>
<div id="clicked-cell">clicked cell is: </div>
<div id="data-changed">changed data is: </div>

<div id="pivot-container">The component will appear here</div>

JavaScript

var button = $("button")

button.on("click", function(){
  alert("Edited cells: " + JSON.stringify(dirtyRows));
})


var dirtyRows = {};
var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: false,
  global: {
    localization: {
      "grid": {
        "blankMember": ""
      }
    }
  },
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },
    slice: getReportSlice(),
    options: getReportOptions()
  }
});

flexmonster.on('cellclick', function(e) {
  $("#clicked-cell").text("clicked cell is: " + e.rowIndex + ":" + e.columnIndex);
});

flexmonster.on('datachanged', function(e) {
  dirtyRows[e.data[0].id] = e.data[0].value;
  $("#data-changed").text("changed data is: " + e.data[0].value);
});

function getData() {
  return [{
    "RowId": {
      "type": "id"
    },
    "Value": {
      "type": "string"
    },
    "Interval": {
      "type": "string"
    }
  }, {
    "RowId": 0,
    "Value": "19.9",
    "Interval": "01/1992"
  }, {
    "RowId": 1,
    "Value": "19.64",
    "Interval": "02/1992"
  }, {
    "RowId": 2,
    "Value": "18.8",
    "Interval": "03/1992"
  }];
}

function getReportSlice() {
  return {
    "rows": [{
      "uniqueName": "Interval"
    }, {
      "uniqueName": "Value"
    }],
    columns: [{
      sort: "asc"
    }],
  }
}

function getReportOptions() {
  return {
    "editing": true,
    "sorting": "off",
    "configuratorButton": false,
    "grid": {
      "type": "flat",
      "showTotals": "off",
      "showFilter": false,
      "showHeaders": false,
      "showGrandTotals": false,
      "showHierarchyCaptions": true,
      "showReportFiltersArea": false,
    }
  }
}