Advanced User Interface Controls and Components
Created: 23 January 2018
In general, items in Context Menu are all enabled. In some cases, you may require to disable a specific menu item, depending on some condition. In this article, you will learn how to disable items in IntegralUI ContentMenu for Angular.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
To open the context menu, , right-click over the block element. At first, you will see that Paste menu option is disabled. By selecting the Cut or Copy option, the current label of block element is saved. Now when you open the menu, the Paste option is enabled.
If you select the Edit menu option, a text editor will popup where you can enter a new label for the block element.
The enabled field of the item object determines whether the menu item is enabled or disabled. By default this field is omitted, which means the item is enabled. When menu structure is created for the first time, you can initially set some items to appear as disabled by setting the enabled field value to false.
@ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;
public menuSettings: any = {
appRef: null,
items: []
}
// Editing
public blockText: string = 'Right click to open the context menu';
public copyText: string = '';
public editText: string = '';
private isEditActive: boolean = false;
private originalText: string = '';
ngAfterViewInit(){
this.menuSettings = {
appRef: this.applicationRef,
items: [
{ id: 1, text: "Edit" },
{ id: 2, type: "separator" },
{ id: 3, text: "Cut" },
{ id: 4, text: "Copy" },
{ id: 5, text: "Paste", enabled: false }
]
}
}
<div #application class="cmnu-disitm-block" [iuiContextMenu]="menuSettings" (menuClick)="menuItemClick($event)" (menuOpening)="onMenuOpening($event)">
<span *ngIf="!isEditActive">{{blockText}}</span>
<input *ngIf="isEditActive" type="text" [(ngModel)]="editText" (keydown)="editorKeyDown($event)" [iuiFocus]="isEditActive" (focus)="selectContent($event)" (blur)="editorLostFocus()" />
</div>
.cmnu-disitm-block
{
background: white;
border: thin solid gray;
width: 800px;
height: 300px;
}
.cmnu-disitm-block span
{
color: #808080;
cursor: default;
display: block;
margin: 140px auto;
text-align: center;
}
.cmnu-disitm-block input
{
border: 0;
font-size: 1.2em;
margin: 137px 0;
text-align: center;
width: 100%;
}
.cmnu-disitm-block input:focus
{
outline: none;
} In above code, the Paste menu item is disabled, and it cannot select it when context menu appears.
In cases when you don't know whether a menu item should be enabled or disabled initially, you can change it during run-time. For this purpose, you can handle the menuOpening event, where you can set a condition that will determine whether the menu item is disabled or not.
menuItemClick(e: any){
if (e.item){
// Action depends on selected menu option
switch (e.item.id){
case 1: // Edit
this.showEditor();
break;
case 3: // Cut
this.copyText = this.blockText;
this.blockText = '';
break;
case 4: // Copy
this.copyText = this.blockText;
break;
case 5: // Paste
this.blockText = this.copyText;
this.copyText = '';
break;
}
}
}
onMenuOpening(e: any){
this.menuSettings.items[4].enabled = this.copyText != '' ? true : false;
} <div #application class="cmnu-disitm-block" [iuiContextMenu]="menuSettings" (menuClick)="menuItemClick($event)" (menuOpening)="onMenuOpening($event)">
<span *ngIf="!isEditActive">{{blockText}}</span>
<input *ngIf="isEditActive" type="text" [(ngModel)]="editText" (keydown)="editorKeyDown($event)" [iuiFocus]="isEditActive" (focus)="selectContent($event)" (blur)="editorLostFocus()" />
</div>
From above code, the Paste menu item is disabled when the variable that stores the label of block element is empty. Now, just before menu appears, this condition is processed and the menu items are updated accordingly.
Note Handling this event allows you to change the Context Menu in many ways, like: how it appears, adding new items or replacing the menu with a very different one.
Disabling a menu item in Context Menu component for Angular is simple. You can disable it initiallty from code, or during run-time based on custom condition. When menu item is disabled, it will appear grayed and non-selectable.
The ContextMenu component is part of IntegralUI Web.