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. Image for the cookie policy date

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


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?

1 Reply

PS Pavithra Subramaniyam Syncfusion Team November 25, 2019 05:10 AM

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. 
    selector: 'app-root', 
    template: `   <ejs-grid #grid id='Normalgrid' (click)="click($event)" [dataSource]='data' allowPaging='true'  
[pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 
                .  .  . 
export class AppComponent { 
    .  .  . 
        // for normal ediitng 
      if (e.target.classList.contains("e-rowcell")) { 
            if (this.grid.isEdit) 
                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); 
Please get back to us if you need any further assistance on this. 
Pavithra S. 

Live Chat Icon For mobile
Up arrow icon