Built-in and custom items in contextMenu

[Candeloro Sgarlata]

I have a question:

in toolbar grid it's possible to Built-in and custom items, for example:

   public toolbar: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel',

         { text: 'Click', tooltipText: 'Click', prefixIcon: 'e-expand', id: 'Click' }];

for public contextMenuItems: ContextMenuItem[]  something similar is possible ?

Regards

[Ajith Govarthan]

Hi Candeloro, 

Thanks for contacting Syncfusion support. 

We have checked your requirement you want to use both custom contextMenu items and built-in contextMenu items. Based on that we have prepared sample in that we have used the both built-in context menu items and custom context menu items and we have handled the custom contextMenu items using the contextMenuClick event. 

For your convenience we have attached the sample so please refer the sample for your reference. 

Code Example: 

app.component.ts 

  ngOnInit(): void { 

      this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

        this.data = orderDetails; 

        this.editing = { allowDeleting: true, allowEditing: true, mode: 'Normal' }; 

        this.contextMenuItems = [ 

   { text: 'Filter Column', target: '.e-headercontent', id: 'filter' }, 

    { text: 'Clear Filter', target:'.e-content',id:'clearfilter'    }, 

    'AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending', 

        'Copy', 'Edit', 'Delete', 'Save', 'Cancel', 

        'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage', 'PrevPage', 

        'LastPage', 'NextPage', 'Group', 'Ungroup']; 

    } 

     contextMenuClick(args: MenuEventArgs): void { 

        if (args.item.id === 'filter') { 

            this.grid.filterByColumn("ShipCountry","startswith","s"); 

        }  

        if(args.item.id === "clearfilter"){ 

          this.grid.clearFiltering(); 

        } 

    } 

Sample Link: https://stackblitz.com/edit/angular-yaukwy-ks2dh7?file=app.component.ts 

Documentation Link: https://ej2.syncfusion.com/angular/documentation/grid/context-menu/#context-menu 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Candeloro Sgarlata]

Hello Ajith,

thank you for your reply; my problem is solved.(It was enough to replace public contextMenuItems: ContextMenuItem[] with  public contextMenuItems: any;)

But I have another problem, my grid is multi-selection, and I would like to disable the "Edit" button in case of selecting multiple lines.

I in the rowSelected event, have:

  public rowSelected(args: RowSelectEventArgs): void {       

        

        this.selectedLog= this.logGrid.getSelectedRecords();  // Get the selected records.       

      

        this.editSettings = { allowEditing: true, allowAdding: false, allowDeleting: true, mode: 'Dialog' };

 

        if (this.selectedLog.length>1) this.editSettings = { allowEditing: false,allowDeleting: true}; // disable Edit

       }

In this way the "Edit" button is correctly disabled in the toolbar, while in the contextmenu it has no effect!

Is there a solution to this problem?

Thank

[Ajith Govarthan]

Hi Candeloro, 

Thanks for the update. 

Based on your requirement you have mentioned that want to disable the editing in the context menu items when you select more than one row. Based on your requirement we have prepared sample in that we have used the contextMenuOpen event and in that we have disabled and enabled the Edit Record context item based on the selected row count. 

For your convenience we have attached the sample  So please refer them for your reference. 

Code Example: 

app.component.ts 

    contextMenuOpen(args:ContextMenuOpenEventArgs):void { 

      debugger; 

      let contextMenuObj = (args.element as any).ej2_instances[0]; 

      if(this.grid.getSelectedRows().length > 1){ 

      contextMenuObj.enableItems(["Edit Record"],false); 

      } else { 

              contextMenuObj.enableItems(["Edit Record"],true); 

      } 

    } 

Sample Link: https://stackblitz.com/edit/angular-yaukwy-sdcuxj?file=app.component.ts 

Documentation Link: https://ej2.syncfusion.com/angular/documentation/context-menu/how-to/enable-or-disable-context-menu-items/ 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Candeloro Sgarlata]

Hello Ajith,

thank you for your reply; my problem is solved

Regards

[Ajith Govarthan]

Hi Candeloro, 

Thanks for the update. 

We are happy to hear that your issue is resolved. 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.