Need a special offer?Find out if your project fits.
+

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