It is triggered when a cell is double-clicked on the grid. For CSV and JSON data, the event is also triggered for the drill-through view.
Parameter/Type | Description |
---|---|
cell CellDataObject | Contains information about the clicked cell. |
1) Display an alert on a cell double-click:
pivot.on('celldoubleclick', function (cell) {
alert(
"Double-clicked a cell - row: "
+ cell.rowIndex + ", column: "
+ cell.columnIndex
+ ", label: "
+ cell.label);
});
Open the example on JSFiddle.
2) Create custom drill-through functionality to show details about a value cell using the celldoubleclick
event.
First, disable the built-in drill-through feature using the options.drillThrough:
const pivot = new Flexmonster({
container: "pivotContainer",
height: 300,
report: {
dataSource: {
data: getData(),
},
slice: {
// Slice configuration
},
options: {
drillThrough: false,
},
},
});
Then, specify the id field type in the mapping:
const pivot = new Flexmonster({
container: "pivotContainer",
height: 300,
report: {
dataSource: {
data: getData(),
mapping: {
"accountId": {
type: "id"
}
},
},
// Report configuration
},
});
Add a celldoubleclick event handler:
const pivot = new Flexmonster({
container: "pivotContainer",
height: 300,
report: {
// Report configuration
},
celldoubleclick: customDrillThrough,
});
// Event handler
function customDrillThrough(cell) {
}
In the handler, get recordIds of the cell that was double-clicked:
function customDrillThrough(cell) { const ids = cell.recordId; }
Create a function that will find a record in the dataset based on the id
:
function getRecords(id) { const data = getData(); for(let i = 0; i < data.length; i++) { if(data[i].accountId === id) { return data[i]; } } return null; }
Get records that compose the double-clicked cell. You can show the records in a pop-up window, save them in a file, or print them to the console:
function customDrillThrough(cell) { const ids = cell.recordId; const records = []; for(let i = 0; i < ids.length; i++) { records.push(getRecord(ids[i])); } showOutput(JSON.stringify(records, null, 2)); }
See the full code on JSFiddle.