We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid column template has some problems.

Thread ID:

Created:

Updated:

Platform:

Replies:

147300 Sep 5,2019 12:10 PM UTC Sep 6,2019 12:13 PM UTC Angular - EJ 2 1
loading
Tags: Grid
Marko Bezjak
Asked On September 5, 2019 12:10 PM UTC

Hello.

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

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 [Syncfusion]
Replied On September 6, 2019 12:13 PM UTC

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);          
          } 
        }); 
    } 
} 
 
 
 
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);          
          } 
        }); 
    } 
} 
 
 
Please get back to us, If you need further assistance. 
 
Regards, 
Pavithra S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon