How to modify grid to be able to edit details directly without need to double click row to make it active

[Tuariq]

Team,

I need to customize the grid such that when user clicks any cell of row it directly get into edit mode

(lets say if a column is of check box type and I click on that cell, it must toggle and get updated in object model)

Can this be acheived?

[Pavithra Subramaniyam]

Hi Tuariq, 

 

Greetings from Syncfusion. 

 

You can achieve your requirement by binding click event for the Grid cells. Inside the click event you can update the row data directly or move to edit state as per your requirement.  Please refer to the below code example, documentation link and sample link for more information. 

 

[component.ts] 

@Component({ 

    selector: 'app-root', 

    template: `   <ejs-grid #grid id='Normalgrid' (click)="click($event)" [dataSource]='data' allowPaging='true'  

[pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

                .  .  . 

            </e-columns> 

        </ejs-grid>`, 

}) 

export class AppComponent { 

    .  .  . 

    click(e){ 

        // for normal ediitng 

      if (e.target.classList.contains("e-rowcell")) { 

            if (this.grid.isEdit) 

                this.grid.endEdit(); 

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

                let rowData  = this.grid.currentViewData[index] as any; 

                // Update the required cell value 

                rowData.Verified = !rowData.Verified; 

                // Update the row with the modified data 

               // this.grid.updateRow(index, rowData); 

 

               // if you want the row should move to edit state please use the below code instead of updating the row 

               // this.grid.selectRow(index); 

               //this.grid.startEdit();                 

            } 

    } 

 

} 

 

 

 

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

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

                              https://ej2.syncfusion.com/angular/documentation/api/grid/edit/#updaterow 

 

Sample               : https://stackblitz.com/edit/angular-edit-on-single-click-p9z8vu?file=app.component.t 

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S.