Power BI is turning 10! Tune in for a special live episode on July 24 with behind-the-scenes stories, product evolution highlights, and a sneak peek at what’s in store for the future.
Save the dateEnhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.
I have a visualisation which has no great need for a context menu other than to be consistent with other Power BI custom visuals. The visual does not use the d3 library, and I can't find a sample to copy off which also doesn't. I'm wondering how I might be able to incorporate it easily?
The current code I'm using is as follows, and it gets all a bit messy in the 'private handleContextMenu' method:
import ISelectionManager = powerbi.extensibility.ISelectionManager;
export class Visual implements IVisual {
private selectionManager: ISelectionManager;
}
constructor(options: VisualConstructorOptions) {
this.handleContextMenu();
}
private handleContextMenu() {
const mouseEvent: MouseEvent = addEventListener as MouseEvent;
const eventTarget: EventTarget = mouseEvent.target;
this.selectionManager.showContextMenu(Selection, { x: MouseEvent.clientX, y: MouseEvent.clientY });
mouseEvent.preventDefault();
}
Managed to resolve this using the d3 library:
import {select} from "d3"; export class Visual implements IVisual { private selectionManager: ISelectionManager; constructor(options: VisualConstructorOptions) { this.selectionManager = options.host.createSelectionManager(); this.handleContextMenu(); } private handleContextMenu() { select(this.target).on("contextmenu", (event: MouseEvent) => { this.selectionManager.showContextMenu({}, { x: event.clientX, y: event.clientY, }); event.preventDefault(); }); }
Check out the July 2025 Power BI update to learn about new features.
User | Count |
---|---|
2 | |
2 | |
1 | |
1 | |
1 |