Grid custom template in column menu item

Question

Hello,I want to add custom template in column menu item for filter or any other actions. I can add the menu items by column menu items but I want to add new menu items with custom template and can use the dropdown or text box control with button same as filter menu has in below screen. ThanksImrankhan Pathan

Samir Varteji · Answer

Hello Team,Any update on this? Is this possible or not?ThanksImrnakhan

Hemanthkumar S · Answer

Hi Samir Varteji,Query: custom template in column menu itemBased on the information you provided, it seems that you
want to create a custom template like a filter dialog in a sub-menu of a column
menu item. To achieve this, we recommend utilizing the columnMenuItems
API of the Grid, which allows you to create custom column menu items.
Additionally, you can leverage the columnMenuOpen event of the Grid,
which triggers before the column menu opens, to customize the menu items.
Furthermore, the columnMenuClick event of the Grid triggers when the
user clicks the column menu of the grid.To implement your requirement, we suggest opening the column
menu and adding a Syncfusion EJ2 Context Menu to your custom column menu item.
By utilizing the beforeItemRender event of the context menu, you can
create a custom component within the context menu. This approach will enable
you to achieve the desired custom template functionality for the column menu
item.For more information, please refer to the below
documentation.Column menu events: https://ej2.syncfusion.com/documentation/grid/columns/column-menu/#column-menu-eventsCustom column menu item: https://ej2.syncfusion.com/documentation/grid/columns/column-menu/#custom-column-menu-itemContext Menu control: https://ej2.syncfusion.com/documentation/context-menu/getting-started/Show UI components in ContextMenu: https://ej2.syncfusion.com/documentation/context-menu/how-to/template/#show-ui-components-in-contextmenuPlease feel free to contact us if you require any further
assistance. We are always available and eager to help you in any way we can.Regards,Hemanth Kumar S

Samir Varteji · Answer

I tried to implement the context menu with column menu as per given documents but not able to add the context menu. Can you please provide the sample code?ThanksImrankhan

Hemanthkumar S · Answer

Hi Samir Varteji,Sorry for the delay and inconvenience caused.Query: custom template and can use the dropdown or text
box control with buttonBased on the information you provided, we understand that
you are looking to create a custom template for the column menu item, which
includes a dropdown and button. In response to your request, we have prepared a
sample-level solution that involves using the Syncfusion EJ2 Dialog component
to create this custom template. This template will be triggered when the custom
column menu item is clicked.For more information, please refer to the below code
example, screenshot, video, and sample.

[app.component.html]
   
    <ejs-grid
      #grid
      [dataSource]="data"
      id="gridcomp"
      allowPaging="true"
      allowGrouping="true"
      allowSorting="true"
      showColumnMenu="true"
      [groupSettings]="groupOptions"
      allowFiltering="true"
      [filterSettings]="filterSettings"
      [columnMenuItems]="columnMenuItems"
      (columnMenuOpen)="columnMenuOpen($event)"
      (columnMenuClick)="columnMenuClick($event)"
    >
   
  [app.component.ts]
   
  import { Component, OnInit, ViewChild } from '@angular/core';
  import {
    SortService,
    ResizeService,
    GroupService,
    ColumnMenuService,
    PageService,
    FilterService,
    GridComponent,
  } from '@syncfusion/ej2-angular-grids';
  import {
    ContextMenuItem,
    GroupSettingsModel,
    FilterSettingsModel,
    EditSettingsModel,
  } from '@syncfusion/ej2-angular-grids';
  import { closest } from '@syncfusion/ej2-base';
  import { Button } from '@syncfusion/ej2-buttons';
  import { DropDownList } from '@syncfusion/ej2-dropdowns';
  import { parentsUntil } from '@syncfusion/ej2-grids';
  import {
    BeforeOpenCloseMenuEventArgs,
    ContextMenu,
    ContextMenuModel,
    MenuEventArgs,
    MenuItemModel,
  } from '@syncfusion/ej2-navigations';
  import { Dialog } from '@syncfusion/ej2-popups';
  import { orderDetails } from './data';
   
  @Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [
      SortService,
      ResizeService,
      GroupService,
      ColumnMenuService,
      PageService,
    ],
  })
  export class AppComponent {
    @ViewChild('grid')
    public grid: GridComponent;
    public data: Object[];
    public groupOptions: GroupSettingsModel;
    public filterSettings: FilterSettingsModel;
    public columnMenuItems: any = [
      { text: 'Open Template Menu', id: 'templatemenu' },
    ];
    public dialog: Dialog;
    ngOnInit(): void {
      this.data = orderDetails;
      this.groupOptions = { showGroupedColumn: true };
      this.filterSettings = { type: 'CheckBox' };
      document.onclick = (args: any): void => {
        if (
          this.dialog &&
          !(
            closest(args.target, '.e-filter-popup') ||
            closest(args.target, '.e-popup-open')
          )
        ) {
          this.destroyCustomDialog();
        }
      };
    }
   
    destroyCustomDialog() {
      this.dialog.destroy();
      if (document.body.querySelector('#cust-sub-templatemenu')) {
        document.body.querySelector('#cust-sub-templatemenu').remove();
      }
    }
   
    columnMenuOpen(args: any) {
      const templateMenu = args.element.querySelector('#templatemenu');
      templateMenu.style.paddingRight = '30px';
      const span = document.createElement('span');
      span.classList.add('e-icons');
      span.classList.add('e-caret');
      templateMenu.appendChild(span);
    }
   
    dialogCreated(args) {
      const dropDownListObject = new DropDownList({
        dataSource: ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'],
      });
      dropDownListObject.appendTo(
        this.dialog.element.querySelector('.cus-ddl') as HTMLElement
      );
   
      let button: Button = new Button({ content: 'Button' });
      button.appendTo(
        this.dialog.element.querySelector('.cus-btn') as HTMLElement
      );
      (
        this.dialog.element.querySelector('.cus-btn') as HTMLElement
      ).addEventListener('click', this.buttonClick.bind(this));
    }
   
    buttonClick(args) {
      (this.grid.columnMenuModule as any).element.ej2_instances[0].close();
      this.destroyCustomDialog();
    }
   
    columnMenuClick(args: any) {
      if (args.item.id === 'templatemenu') {
        if (this.dialog) {
          this.dialog.destroy();
          if (document.body.querySelector('#cust-sub-templatemenu')) {
            document.body.querySelector('#cust-sub-templatemenu').remove();
          }
        }
   
        const dialogElement = document.createElement('div');
        dialogElement.id = 'cust-sub-templatemenu';
        dialogElement.classList.add('e-filter-popup');
        document.body.appendChild(dialogElement);
   
        const content = document.createElement('div');
        const ddElement = document.createElement('input');
        ddElement.classList.add('cus-ddl');
        const btnElement = document.createElement('button');
        btnElement.classList.add('cus-btn');
        content.appendChild(ddElement);
        content.appendChild(btnElement);
   
        this.dialog = new Dialog({
          content: content,
          target: document.body,
          width: '250px',
          created: this.dialogCreated.bind(this),
          position: {
            X:
              args.element.getBoundingClientRect().left +
              args.element.getBoundingClientRect().width,
            Y: args.element.getBoundingClientRect().top,
          },
        });
        this.dialog.appendTo(dialogElement);
      }
    }
  }

Screenshot:Sample Link: https://stackblitz.com/edit/angular-x94yg2-vfmgvy?file=src%2Fapp.component.html,src%2Fapp.component.tsPlease feel free to contact us if you require any further
assistance. We are always available and eager to help you in any way we can.Regards,Hemanth Kumar SAttachment: video_c3e3f81.zip