The toggle ON/OFF button is not working everytime.

The toggle ON/OFF button click event is not working every time. Sometime it gets triggered and sometime it doesn't.

Also, getting "collapseAllComplete" in console when clicking on the toggle. 


I have added the html code for your reference:

 <e-column headerText='Actions for Program Staff' minWidth='70' width='100' textAlign='Center'>

                            <ng-template #template let-data>

                                <span class="linkActionIcons">

                                    <ng-container *ngFor="let actionData of data.managePanelactionList" >

                                      <ng-container *appLet="actionData | customPanelAction : (isSuperUser || isNsfStaff )" >

                                        <button *ngIf="(actionData.name === 'activateInactivate' && (isSuperUser || isNsfStaff )) || actionData.name !== 'activateInactivate'" class="action" (click)="viewAction(actionData,data) ">

                                            <span [title]="actionData.name === 'activateInactivate' ? (data.isViewable === 'N' ? 'Inactive' : 'Active'): actionData.tooltip" >

                                              <ng-container *ngIf="actionData.name === 'activateInactivate'">

                                                <i [ngClass]="[actionData.click === 'false' ? 'disabled' : '']" class="{{ data.isViewable === 'N' ? 'fa fa-toggle-off' : actionData.icon.className }}" aria-hidden="true"></i>

                                              </ng-container>

                                              <ng-container *ngIf="actionData.name !== 'activateInactivate'">

                                                <i [ngClass]="[actionData.click === 'false' ? 'disabled' : '']" class="{{ actionData.icon.className }}" aria-hidden="true"></i>

                                              </ng-container>

                                                <span class="sr-only">{{actionData.name === 'activateInactivate' ? (data.isViewable === 'N' ? 'Inactive' : 'Active'): actionData.tooltip }}</span>

                                            </span>

                                        </button>

                                      </ng-container>

                                    </ng-container>

                                </span>

                            </ng-template>

                        </e-column>



1 Reply

MM Mohamed Mahadeer Sabarmydeen Syncfusion Team April 16, 2025 03:51 PM UTC

Hi Mohammed Rahman,


Thank you for reaching out to us. Based on the shared code snippet, it appears that you are trying to toggle a button inside a Grid column. Could you please confirm which component you are currently using?


Sharing this information will help us better understand the issue and provide you with a prompt and accurate response. We appreciate your understanding and cooperation.

Regards,
Mohamed Mahadeer S


Loader.
Up arrow icon