How to use updateData for adding/updating/removing partial data
Data source
by Flexmonster Pivot Table
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()
},
"slice": {
"rows": [ { "uniqueName": "Category"} ],
"columns": [ {"uniqueName": "[Measures]"} ],
"measures": [ {"uniqueName": "Price"} ],
"sorting": {
"column": {
"type": "desc",
"tuple": [],
"measure": "Price"
}
}
}
}
});
function addRecord() {
var dataForUpdate = [{
"Category": "Cars",
"Price": 51844,
"RowId": 4
}]
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" },
"RowId": { "type": "id" },
"DeleteRow": { "type": "delete" }
},
{
"Category": "Accessories",
"Price": 242,
"RowId": 1
},
{
"Category": "Bikes",
"Price": 1487,
"RowId": 2
},
{
"Category": "Clothing",
"Price": 40,
"RowId": 3
}
]
}