Update only some part of JSON data without clearing the report

Data source

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>How to update only some part of JSON data without clearing the report</h2>
  <p>
  The <a href="https://www.flexmonster.com/api/updatedata/" target="_blank">updateData()</a> method allows updating the data whereas other report configurations are not changed. 
  </p>
  <p>
  For JSON, <code>updateData()</code> supports partial data update. This example shows how to add, edit, and delete records in your dataset.
  </p>
  <p>
  <a href="https://www.flexmonster.com/api/updatedata/#!example-4" target="_blank">Visit our docs to learn more about partial data update</a>.
  </p>
</div>

<button onclick="addRecord()">Add one record</button>
<button onclick="editRecords()">Edit two records</button>
<button onclick="deleteRecord()">Delete one record</button>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 300,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
      	"Category": {
        	type: "string"
      	},
      	"Price": {
        	type: "number"
      	},
      	"RowId": {
        	type: "id"
      	}
    	}
    }
  }
});

function addRecord() {
  const dataForUpdate = [{
    "Category": "Cars",
    "Price": 51844,
    "RowId": 4
  }]
  pivot.updateData({
    data: dataForUpdate
  }, {
    partial: true
  });
}

function editRecords() {
  const dataForUpdate = [{
      "Category": "Accessories",
      "Price": 400,
      "RowId": 1
    },
    {
      "Category": "Bikes",
      "Price": 3000,
      "RowId": 2
    }
  ]
  pivot.updateData({
    data: dataForUpdate
  }, {
    partial: true
  });
}

function deleteRecord() {
  const dataForUpdate = [{
    "RowId": 3,
    "IsDeleted": true
  }]
  pivot.updateData({
    data: dataForUpdate
  }, {
    partial: true
  });
}

function getData() {
  return [
    {
      "Category": "Accessories",
      "Price": 242,
      "RowId": 1
    },
    {
      "Category": "Bikes",
      "Price": 1487,
      "RowId": 2
    },
    {
      "Category": "Clothing",
      "Price": 40,
      "RowId": 3
    }
  ]
}