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.