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

cellClick feedback in Edit mode

What is the preferred method of accessing the data in a specific cell? I have had no feedback using cellClick and I am struggling to find in the documentation the preferred or correct approach. The closest I have is selectedCell but I am trying to access it within Edit mode.

I can't find cellClick in the official documentation however I can find cellEdit but produces no feedback either

Event: cellEdit



TS
cellEdit(args: any): void{}

<ejs-grid #grid [dataSource]='dmtable'
[toolbar]='toolbar'
(toolbarClick)='onToolbarClick($event)'
[editSettings]="editSettings"
(cellSelected)="onCellSelected($event)"
(cellClick)="onCellClick($event)"
(cellEdit)='cellEdit($event)'
[selectionSettings]='selectionOptions'
height='410px'
>

onCellSelected(args: CellSelectEventArgs) {
if (args.cellIndex) {
const firstSelectedCell = args.cellIndex;
const rowIndex = firstSelectedCell.rowIndex;
const columnIndex = firstSelectedCell.cellIndex;
this.rowData = this.grid.getCurrentViewRecords()[rowIndex];
this.columnType = this.grid.columns[columnIndex] as Column;
this.columnName = this.columnType.field;
this.cellValue = this.rowData[this.columnName];
console.log('Selected cell value:', this.cellValue);
}

onCellClick(args: ClickEventArgs): void {
console.log("cell clicked");
}

cellEdit(args: any): void{
console.log("cecll edit event");
}


Thanks
MCR


3 Replies

DM Dineshnarasimman Muthu Syncfusion Team May 2, 2023 02:04 PM UTC

Hi MCR,


Greetings from Syncfusion Support.


We have reviewed your query about accessing the data of the cell. We suggest you use cellEdit event for accessing the data when performing cell editing operation. You can also use recordClick event which triggers when click is performed. We have attached a code snippet and sample for your reference.


cellEdit(args: any)

{

var data=args.rowData

}

recordClick(args)

{

var data=args.rowData

}




Sample: https://stackblitz.com/edit/angular-xaniln?file=src%2Fapp.component.ts


Please let us know if you need any further assistance.


Regards,

Dineshnarasimman



MR mc r May 3, 2023 01:43 AM UTC

I appreciate the response Dineshnarasimman and had created an updated forum post for clarification not expecting a response here.

Ideally I am looking for the correct event to handle clicking from cell to cell or tabbing into a new cell.
Example if I click or tab from the RuleID cell in focus "99" to the Name column with "CellClickTest" what event can I call.
Everything from my understanding and testing relies on the event of selecting the cell/row outside of in-line editing. cellEdit has provided no feedback at this stage for an unkown reason, recordClick works on clicking the row/cell but does not trigger during in-line editing.

What are my options while in-line editing? Should cellEdit trigger when clicking/tabbing between cells? Is there something else I can use to handle this event?

Your responses are much appreciated!

MCR



https://www.syncfusion.com/forums/182094/event-on-cell-click-tab-in-editmode



DM Dineshnarasimman Muthu Syncfusion Team May 3, 2023 02:25 PM UTC

Hi MCR,


After reviewing the query, we understood that you need cellEdit in inline edit mode. As the cellEdit event won't be triggered during the inline edit, we suggest you to use actionComplete event and check the action by using condition args.requestType equals to beginEdit. In the inline edit mode, the entire row undergoes to edit state whereas in the batch edit mode the specific cell undergoes edit state. We have attached the code snippet and sample for your reference.


  actionComplete(args){

      if(args.requestType==='beginEdit')

      {

        let data=args.form;

      }

    }

 


Sample: https://stackblitz.com/edit/angular-udaqpk-icvh7k?file=app.component.ts


Please let us know if you need any further assistance.


Regards,

Dineshnarasimman


Loader.
Live Chat Icon For mobile
Up arrow icon