Grid with contextmenu

Question

I have list of users in grid, each user has contextmenu . I need to change the contextmenu items text dynamically depending on the user status. I am always getting same status, not able to set it based on data

If the status is active, i need to show option Lock Account in the contextmenu

If the status is Locked, i need to show option UnLock Account in the contextmenu etc

I am trying to set in rowDataBound of the grid

<ejs-grid #grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [pageSettings]='pageOptions'

[contextMenuItems]="contextMenuItems" (contextMenuClick)='contextMenuClick($event)' (rowDataBound)= "rowDataBound($event)"

[allowExcelExport]='true' (commandClick)="commandClick($event)" [allowFiltering]='true' [filterSettings]='filterOptions'>

public contextMenuItems: ContextMenuItemModel[];

rowDataBound(args: any) {

this.contextMenuItems = [{ text: 'Profile Edit', target: '.e-content', id: 'profileEdit' },

{ text: 'Password Reset Link', target: '.e-content', id: 'passwordLink' },

{ text: args.data.status === 'Locked' ? 'UnLock Account' : 'Lock Account', target: '.e-content', id: 'lockAccount' },

// { text: 'UnlockAccount', target: '.e-content', id: 'unlockAccount' },

{ text: 'DeActivateAccount', target: '.e-content', id: 'deactivateAccount' }];

}

Balaji Sekar · Accepted Answer

Hi Vin, 
 
We have provided the support for showItems / hideItems methods to show / hide the menu items in the menu based on the text of the items. So we can show / hide menu items using Menu text alone. For more details please refer to the Documentation below. 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/api/context-menu#hideitems 
                                          https://ej2.syncfusion.com/angular/documentation/api/context-menu#showitems 

Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar

Balaji Sekar · Answer

Hi Vin, 
 
Greetings from the Syncfusion support. 
 
We have analyzed your query with provided information and we have achieved the custom contextMenu item visibilities using contextMenuOpen event of the Grid and we have defined separate items in context menu list. Since you can enable “Lock Account” item if status in “Active” and enable “UnLock Account” if status in “Locked”. Please refer the below code example and sample for more information. 




[app.component.ts] 
 this.contextMenuItems = ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending', 
            'Copy', 'Edit', 'Delete', 'Save', 'Cancel', 
            'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage', 'PrevPage', 
            'LastPage', 'NextPage',  { text: 'Lock Account' , target: '.e-content', id: 'lockAccount' }, 
            { text: 'UnLock Account' , target: '.e-content', id: 'unlockAccount' }]; 
    } 
   public contextMenuOpen(args:any){        
      var contextMenuObj = this.grid.contextMenuModule 
        .contextMenu; 
      if (args.rowInfo.rowData.Status== "Active") { 
        contextMenuObj.showItems(["Lock Account"]); 
        contextMenuObj.enableItems(["Lock Account"], true); 
        contextMenuObj.hideItems(["UnLock Account"]); 
      } else { 
        contextMenuObj.showItems(["UnLock Account"]); 
        contextMenuObj.enableItems(["UnLock Account"], true); 
        contextMenuObj.hideItems(["Lock Account"]); 
      } 
     
    } 
 
 
Sample link: https://stackblitz.com/edit/angular-yq3sth-hdvwed 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar

vin · Answer

ThanksShow/hide is only working with Id, otherwise i am getting style error in java script consoleontextMenuObj.showItems(["UnLock Account"]);  ==> ontextMenuObj.showItems(["unlockAccount"]);