Grid column template has some problems.

[Marko Bezjak]

Hello.

I have prepared an example to showcase some of the problems Im dealing with when using column template inside the Grid component.

https://stackblitz.com/edit/angular-2p3vhe-ubvah9?file=app.component.ts

I this example orderDate column has an template attached to it.

Problem 1.) 

your documentation for "single click edit" https://ej2.syncfusion.com/angular/documentation/grid/how-to/enable-editing-in-single-click/ does not cover this situation where ng-template contains other DOM elements. I made a work around for this problem where I search for parent TD element and then I check if its is .e-rowcell and is not in .e-active state... BUT its an ugly and slow. Please update docs with neater and better solution :)

Problem 2.)

This is a big one. To recreate:

1.) open my example

2.) double click on any cell in orderDate coulumn to edit it.

3.) now try to confirm or leave the cell with ENTER key. The first click on enter does nothing but the second one some how copies the cell contents in the URL.

Br.  Marko

[Pavithra Subramaniyam]

Hi Marko, 

 

Thanks for contacting us. 

 

Query#1: documentation does not cover this situation where ng-template contains other DOM elements. I made a work around for this problem where I search for parent TD element and then I check if its is .e-rowcell and is not in .e-active state 

 

We have checked the attached sample and we could see that you have used startEdit and endEdit methods to use single edit. We would like to inform you that startEdit and endEdit methods are used for Normal Editing mode. Since you are using Batch editing in your sample we suggest you to use editCell method which is used to edit the Cell in Batch mode. Also we have logged a task to update the documentation. We have modified the attached sample as per your requirement. Please find the below code example and sample for more information. 

 

 

App.Component.html 

<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (cellSave)="cellSave($event)" (load)="load($event)"> 

. . . 

              </ejs-grid> 

App.component.ts 

export class AppComponent { 

. . . 

 

    public ngOnInit(): void { 

. . . 

 

    cellSave(args) { 

      console.log(args); 

    } 

 

    load(args){ 

         this.grid.element.addEventListener('mousedown', (e: MouseEventArgs) => { 

           let rowcell = parentsUntil(e.target as HTMLElement, "e-rowcell"); 

        if (rowcell) { 

            let index: number = parseInt(rowcell.getAttribute("Index")); 

            let colindex: number = parseInt(rowcell.getAttribute("aria-colindex")); 

            let field: string = this.grid.getColumns()[colindex].field; 

            this.grid.editModule.editCell(index, field); 

        }; 

        }); 

        this.grid.element.addEventListener('keydown', (e: KeyboardEventArgs) => { 

          let templatecell = parentsUntil(e.target as HTMLElement, "e-templatecell"); 

          if (this.grid.isEdit && e.code === 'Enter' && templatecell) { 

            let index: number = parseInt(templatecell.getAttribute("Index")); 

            let colindex: number = parseInt(templatecell.getAttribute("aria-colindex")); 

            let field: string = this.grid.getColumns()[colindex].field; 

            index === this.grid.getRows().length - 1 ? this.grid.editModule.saveCell(): this.grid.editModule.editCell(index + 1, field);          

          } 

        }); 

    } 

} 

 

Sample               : https://stackblitz.com/edit/angular-2p3vhe-hi87tv-modified?file=app.component.html 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/enable-editing-in-single-click/#batch-editing 

 

Query#2: now try to confirm or leave the cell with ENTER key. The first click on enter does nothing but the second one somehow copies the cell contents in the URL. 

 

Since template column has some limitations you can achieve your requirement by using the below way. Please find the below code example and sample for more information. 

 

App.Component.html 

<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (cellSave)="cellSave($event)" (load)="load($event)"> 

. . . 

              </ejs-grid> 

App.component.ts 

export class AppComponent { 

. . . 

 

    public ngOnInit(): void { 

. . . 

 

    cellSave(args) { 

      console.log(args); 

    } 

 

    load(args){ 

         this.grid.element.addEventListener('mousedown', (e: MouseEventArgs) => { 

           let rowcell = parentsUntil(e.target as HTMLElement, "e-rowcell"); 

        if (rowcell) { 

            let index: number = parseInt(rowcell.getAttribute("Index")); 

            let colindex: number = parseInt(rowcell.getAttribute("aria-colindex")); 

            let field: string = this.grid.getColumns()[colindex].field; 

            this.grid.editModule.editCell(index, field); 

        }; 

        }); 

        this.grid.element.addEventListener('keydown', (e: KeyboardEventArgs) => { 

          let templatecell = parentsUntil(e.target as HTMLElement, "e-templatecell"); 

          if (this.grid.isEdit && e.code === 'Enter' && templatecell) { 

            let index: number = parseInt(templatecell.getAttribute("Index")); 

            let colindex: number = parseInt(templatecell.getAttribute("aria-colindex")); 

            let field: string = this.grid.getColumns()[colindex].field; 

            index === this.grid.getRows().length - 1 ? this.grid.editModule.saveCell(): this.grid.editModule.editCell(index + 1, field);          

          } 

        }); 

    } 

} 

 

Sample: https://stackblitz.com/edit/angular-2p3vhe-hi87tv-modified?file=app.component.html 

 

Please get back to us, If you need further assistance. 

 

Regards, 

Pavithra S