1. Home
  2. Forum
  3. Angular - EJ 2
  4. checkbox in defalut contextmenu of the grid

checkbox in defalut contextmenu of the grid


Hi there,

 kindly help me with this problem. I want checkbox with default functionality  of the grid like (add Row ,EditRow,DeleteRow,) in context menu .because.

(beforeItemRender)='itemRender($event)'

is not found grid property. 

I want both. checkbox and default functionality 


table.jpg

kindly help me with this problem.



5 Replies
AG Ajith Govarthan Syncfusion Team November 20, 2021 04:15 AM UTC

Hi zeeshan, 

Thanks for the update. 

Currently we are validating your checkbox element with contextmenu items requirement at our end and we will update further details on 23rd November 2021. 

Until then we appreciate your patience. 

Regards, 
Ajith G 


ZE zeeshan November 22, 2021 11:46 AM UTC

Hi there,

Thank you for your response kindly help me this issue as soon as possible.


Regards, 
Zeeshan abid

AG Ajith Govarthan Syncfusion Team November 23, 2021 01:04 PM UTC

Hi Zeeshan, 

Thanks for the patience. 

Based on your query, you want to use checkbox option for particular context menu items in your Grid application. So, we have prepared sample in that we have used custom contextmenu component and using the beforeItemRenderer event we have rendered the checkboxes for particular items of the context menu. 

You can use the select event of the contextMenu to enable and disable the feature as per the selected item in the contextmenu. For your convenience, we have attached the sample, please refer them for your reference. 

Code Example: 
App.component.ts 


  public itemBeforeEvent(args: MenuEventArgs) { 
    if (args.item.text !== 'Edit') { 
      let shortCutSpan: HTMLElement = createElement('span'); 
      let text: string = args.item.text; 
      args.element.textContent = ''; 

      let inputEle = createElement('input'); 
      inputEle.type = 'checkbox'; 
      inputEle.setAttribute('class', 'e-checkbox'); 
      shortCutSpan.innerText = text; 

      args.element.appendChild(inputEle); 
      args.element.appendChild(shortCutSpan); 
    } 
  } 

  onSelect(args) { 
    if ( 
      !args.event.target.classList.contains('e-checkbox') && 
      args.item.text !== 'Edit' 
    ) { 
      var checkbox = args.element.querySelector('.e-checkbox'); 
      checkbox.checked = !checkbox.checked; 
    } 

    if (args.item.text === 'Edit') { 
      if (this.grid.getSelectedRecords().length) { 
        this.grid.startEdit();  // handle the grid actions as per your requirement here. 
      } else { 
        alert('Select any row'); 
      } 
    } 
  } 

App.component.html 

  <ejs-contextmenu 
    id="contextmenu" 
    #contextmenu 
    target=".e-content" 
    [items]="menuItems" 
    (select)="onSelect($event)" 
    (beforeItemRender)="itemBeforeEvent($event)" 
  ></ejs-contextmenu 
  >` 


Note: Since it is a custom context menu you need to handle the other editing related actions at your own using the grid methods. Please refer the below API documentation for your reference. 

UG-Links: 


please get back to us if you need further assistance. 

Regards, 
Ajith G. 


ZE zeeshan November 23, 2021 02:29 PM UTC

Hi there ,

Thank you for your response who can i add these option  AddRows . AddChild , AddParent in custom context menu in grid. These option only available  in default contexts menu  is there is any function available for it in custom context menu .


Regards, 
Zeeshan abid 





AG Ajith Govarthan Syncfusion Team November 24, 2021 04:05 PM UTC

Hi Zeeshan abid, 

Thanks for the update. 

In our last update we have used custom contextMenu outside the Grid component and rendered the checkbox elements for specific items of the context menu. Since we have provided custom contextmenu sample in that you need to handle the default context menu items by your own. 

 So, to avoid such complexities we have prepared sample and in that used the contextMenuOpen event to add checkbox options for custom context menu items with default grid contextmenu feature. For your convenience, we have attached the sample, please refer them for you reference. 

Code Example: 
App.compoennt.ts 


  ngOnInit(): void { 
    this.data = orderDetails; 
    this.contextMenuItems = [ 
      { 
        text: 'Enable Selection', 
        iconCss: 'c-custom', // add this class names to select from the list elements 
        target: '.e-content', 
        id: 'selection', 
      }, 
      { 
        text: 'Enable DragandDrop', 
        iconCss: 'c-custom', 
        target: '.e-content', 
        id: 'drag', 
      }, 
      'AutoFit', 
      'AutoFitAll', 
      'SortAscending', 
      'SortDescending', 
      'Copy', 
      'Edit', 
      'Delete', 
      'Save', 
      'Cancel', 
      'PdfExport', 
      'ExcelExport', 
      'CsvExport', 
      'FirstPage', 
      'PrevPage', 
      'LastPage', 
      'NextPage', 
    ]; 
    this.editing = { allowDeleting: true, allowEditing: true }; 
  } 

  contextMenuOpen(args) { 
    if (this.isInitialLoad) { 
      this.isInitialLoad = false; 
      var parentNode = []; 
      var customEle = args.element.querySelectorAll('.c-custom'); 
      if (customEle.length) { 
        customEle.forEach((innerEle) => { 
          parentNode.push(innerEle.parentElement); 
        }); 
        console.log(parentNode); 
        parentNode.forEach((ele) => { 
          var text = ele.textContent; 
          ele.innerText = ''; 
          let inputEle = createElement('input'); 
          inputEle.type = 'checkbox'; 

          inputEle.setAttribute('class', 'e-checkbox'); 
          ele.prepend(inputEle); 
          let spanEle = createElement('span'); 
          spanEle.textContent = text; 
          spanEle.setAttribute('class', 'e-checkboxspan'); 
          ele.appendChild(spanEle);  // append checkbox for custom items 
        }); 
      } 
    } 
  } 
  contextMenuClick(args) { 
    if (args.event.target.classList.contains('e-checkboxspan')) { 
      var checkbox = args.element.querySelector('.e-checkbox'); 
      checkbox.checked = !checkbox.checked;  // maintain the checkbox state here 
    } 
  } 



Now you can use both default and custom context menu items with checkbox options. 

Please get back to us if you need further assistance. 

Regards, 
Ajith G. 
 


Loader.
Up arrow icon