How to add custom context menu in angular spreadsheet headers

Question

Hey Syncfusion Team,I'm using Angular Spreadsheet component and I want to show a custom context to the user on left mouse click on spreadhsheet headers and hence it will replace the default full column select feature of spreadsheet component.Can you please provide a demo how to do this?Thanks and Regards,Vivek SInghal

Thaneegairaj Sankar · Accepted Answer

Hi Vivek, 
 
We can able to achieve your requirement in spreadsheet by using beforeSelect event. Please find the below code example, 
 




beforeSelect(args) { 
    let indexes = getRangeIndexes(args.range); 
    if (indexes[0] === 0 && indexes[2] >= 99 && indexes[1] === indexes[3]) { 
      args.cancel = true; 
      const left = this.spreadsheetObj.getCell(0, indexes[1]).offsetLeft + 39; // row header width 30px + body padding 8px; 
      const top = this.spreadsheetObj.element.querySelector('.e-sheet').offsetTop + this.spreadsheetObj.element.querySelector('.e-column-header').offsetHeight; 
      this.contextmenuObj.open(top, left);  
    } 
  } 
 
For your reference we have prepared a sample, please find the below link. 
 
Link: https://stackblitz.com/edit/angular-pyuoyx-mfkhos?file=app.component.ts 
 
Could you please check the above details and get back to us whether it fulfill your requirement or need further assistance on this. 
 
Regards, 
Thaneegairaj S

Vivek Singhal · Answer

Thanks Sankar,It's working as desired.Thanks and Regards,Vivek Singhal

Thaneegairaj Sankar · Answer

Hi Vivek,  
 
We are happy to hear that your requirement has been achieved. Please feel free to contact us if you need any further assistance on this. 
 
Regards, 
Thaneegairaj S