Need to implement edit and delete button

[Narsimsetty Chalamaiah]

Hi Team,

I need to implement Edit and Delete button . as per below screens while click edit button need to show data in popup for update data ,

after click edit button.

after click delete button need to show confirm message in popup for  delete record. please find below screen,

Please send sample code asap.

Thanks & Regards

Chalamaiah N

[Narsimsetty Chalamaiah]

Hi Team,

i want to be use image button in ejs grid , but I tried to add ng-template in ejs grid like below code , i am not able hit onClickTalkingTrack method, please find below code and screen shot

using Angular 16 and synfusion 21.2.3

html:

 <ejs-grid #grid [dataSource]='data' [allowPaging]='true' [pageSettings]='pageSettings' [allowSorting]='true'

                  [height]="300" [resizeSettings]="resizeSettings"

                  (dataBound)="dataBound($event)"

                  (recordClick)="recordClick($event)">

          <e-columns>

            <e-column headerText='Employee Image' width='150' textAlign='Center'>

              <ng-template #template let-data>

                <div>

                   <!--  <img class="Talking_track" alt="" (click)="onClickTalkingTrack(data)" />      -->             

                 <img src="../../../assets/images/track.svg" alt="" (click)="onClickTalkingTrack(data)" />

                </div>

              </ng-template>

            </e-column>

            <e-column field='Name' headerText='Name' width=120></e-column>

            <e-column field='Active' headerText='Active' width=90></e-column>

          </e-columns>

        </ejs-grid>

Component.ts

onClickTalkingTrack(args: any) {

debugger;

//this.GoogleAnalyticsService.RegisterEvent("Screen Activity", "Talking Track hyperlink", "TalkingTrack hyperlink")

//this.TalkingTrackModalService.newCustomerId(args.CustomerNo);

}

not hitting to onClickTalkingTrack method.

find screen shot

Thanks & Regards

Chalamaiah N

[Narsimsetty Chalamaiah]

Please reply Asap.

[Pavithra Subramaniyam]

Hi Narsimsetty Chalamaiah,

Query#1: I need to implement Edit and Delete button . as per below screens while click edit button need to show data in popup for update data ,& after click delete button need to show confirm message in popup for  delete record. please find below screen,

You can achieve your requirement with the default “Command Column” feature with “Dialog” editing. Also, you can show the confirmation popup on deleting a row by settings the “editSettings.showDeleteConfirmDialog” property. Please refer to the below code example and documentation link for more information.

<e-column headerText='Manage Records' width='160' [commands]='commands'></e-column>

 

export class AppComponent {

 

  public ngOnInit(): void {

      .   .  .

      this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true,

           showDeleteConfirmDialog:true, mode: 'Dialog', allowEditOnDblClick: false };

      this.commands = [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },

      { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },

      { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },

      { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }];

  }

}

 

https://helpej2.syncfusion.com/angular/documentation/api/grid/editSettings/#showdeleteconfirmdialog

https://ej2.syncfusion.com/angular/demos/#/material/grid/command-column

https://ej2.syncfusion.com/angular/demos/#/material/grid/dialog-editing

Query#2: but I tried to add ng-template in ejs grid like below code , i am not able hit onClickTalkingTrack method,

We have checked the issue at our end, but it is working fine. Please refer to the below sample link for more information.

https://stackblitz.com/edit/angular-kmpsda?file=src%2Fapp.component.html

To validate further could you please share the issue reproducible sample which will be helpful for us to provide a better solution as early as possible.

Regards,

Pavithra S

[Narsimsetty Chalamaiah]

Thank You , it is working fine .

[Suganya Gopinath]

We are glad to hear that the provided solution helped to solve the issue.