We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.

Enable right click based on condition

Answered
Sangamesh asked on August 30, 2019

As per https://www.flexmonster.com/doc/customizing-context-menu/
I need to enable or disable right click menu based on some value. How can i pass value to this method

customizeContextMenu

4 answers

Public
Vera Didenko Vera Didenko Flexmonster August 30, 2019

Hello, 
 
Thank you for your question.
 
We kindly suggest using a global variable:

var disableContextMenu = true;

flexmonster.customizeContextMenu(function(items, data, viewType) {
return (disableContextMenu)?[]:items;
});

 
Here is a JSFiddle example for illustration: https://jsfiddle.net/flexmonster/ts57bw9n/.
 
 
Please let us know if you have any questions.
 
Best Regards,
Vera

Public
Devesh August 30, 2019

Hi Vera,
I tried this with angular 5. I have a class level variable but I can not access inside customizeContextMenu function. 
I am using like -'this. disableContextMenu', but 'this' does not refers to the component class.
e.g.

onPivotReady(pivot: Flexmonster.Pivot): void {
this.pivot.customizeContextMenu=this.onCustomizeContextMenu.bind(this);
}

 

public onCustomizeContextMenu(items, data, viewType) {
return this.disableContextMenu)?[]:items; // 'disableContextMenu is undefined here as 'this' refers to something else not the class.
 
}

please guide if I am doing something wrong here.

Public
Vera Didenko Vera Didenko Flexmonster September 2, 2019

Hello, Devesh,
 
 
Thank you for writing to us.
 
 
We kindly advise creating a separate property (customizeContextMenuHandler) which will refer to the function (onCustomizeContextMenu) in app.component.ts:

customizeContextMenuHandler = (a,b,c) => {return this.onCustomizeContextMenu(a,b,c);}


onCustomizeContextMenu(items: Flexmonster.ContextMenuItem[], data: Flexmonster.CellData | Flexmonster.ChartData, viewType: string): Flexmonster.ContextMenuItem[] {

   return (this.disableContextMenu ? [] : items);

}

 
Then in app.component.html refer to the defined handler property:

<fm-pivot#pivot

[toolbar]="true"

[width]="'100%'"

[height]="500"

[report]="pivotReport"

[customizeContextMenu]="customizeContextMenuHandler"

(ready)="onPivotReady($event)"

(reportcomplete)="onReportComplete($event)">

</fm-pivot>

 
The disableContextMenu class level variable should be available if defined in the class scope, for example in app.component.ts:

export class AppComponent {

public disableContextMenu = true;
...
}

Please let us know if the above suggestion helps.
 
 
Best Regards, 
Vera

Public
Devesh September 5, 2019

Thanks Vera , it worked

Please login or Register to Submit Answer