Restrict expand/collapse only to expand/collapse icon.

[Sai Kumar]

Hi,

I am creating some buttons in <e-accordianitem>. But, when clicking on those buttons, expand/collapse action is getting triggered. How to restrict expand/colapse only to expand/collapse icon ?

[Satheesh Kumar Balasubramanian]

Hi Sai, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Restrict expand/collapse only to expand/collapse icon" at our end and suspect that you need to prevent expand/collapse of accordion item on button(Placed in accordion header) click. We have achieved your requirement using accordion clicked and expanding events. For the same we have prepared a sample for your reference which can be viewed from the following link. 

  

Sample: https://stackblitz.com/edit/angular-accordion-prevent-expand-collapse?file=app.component.html 

  

app.component.html:   

  <ejs-accordion (expanding)="expanding($event)" (clicked)="onClick($event)"> 

 ........................ 

  </ejs-accordion> 

  

app.component.ts:   

export class AppComponent { 

  constructor() {} 

  public clickEventArgs: Event; 

  public btnClicked(e: any): void { 

    console.log(e); 

  } 

  public expanding(e: ExpandEventArgs) { 

    if (this.clickEventArgs) { 

      let buttonEle = closest(this.clickEventArgs.target as Element, '.e-btn'); 

      if (buttonEle) { 

        e.cancel = true; 

      } 

    } 

  } 

  public onClick(e) { 

    this.clickEventArgs = e.originalEvent; 

  } 

} 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B