How to use updateData for adding/updating/removing partial data

Data source

by yahmed

HTML

<link rel="stylesheet" href="https://cdn.flexmonster.com/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<button id="btn" onclick="addRecord()">Update data: add one record</button>
<button id="btn" onclick="editRecords()">Update data: edit two records</button>
<button id="btn" onclick="deleteRecord()">Update data: delete one record</button>
<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  report: {
    dataSource: {
      data: getData()
    }
  }
});

function addRecord() {
	var dataForUpdate = [{
      "Category": "Cars",
      "Price": 51844
  }]
  flexmonster.updateData({data: dataForUpdate}, {partial: true});
}

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

function deleteRecord() {
	var dataForUpdate = [{
      "RowId": 3,
      "DeleteRow": true
  }]
  flexmonster.updateData({data: dataForUpdate}, {partial: true});
}

function getData() {
  return [
  	{
    	"Category": { "type": "string" },
      "Price": { "type": "number" },
      "DeleteRow": { "type": "delete" }
    },
    {
      "Category": "Accessories",
      "Price": 242,
    },
    {
      "Category": "Bikes",
      "Price": 1487,
    },
    {
      "Category": "Clothing",
      "Price": 40,
    }
  ]
}