Event on cell click/tab in editmode?

[mc r]

While in edit mode I would like to trigger and event based on a specific cell either tabbing into the cell or clicking on the cell, now I have the logic setup but I cannot find an appropriate API within the Grid that handles calls based on being in edit mode.

Everything I can find relies on the selecting of cells such as cellSelected, cellQueryinfo, or the edit itself such as cellEdit, cellSave etc.

Everything online pushes me to use cellClick but it is absent from the documentation as well was wanting to use tab also.

Thanks
MCR

[Vikram Sundararajan]

Hi MCR,

Greetings from syncfusion support,

We understand that you are looking for a solution to trigger an event when a specific cell is clicking or tabbing into while in edit mode in the Syncfusion EJ2 Grid component. Based on your requirement, you can make use of the keyPressed and click events. The keyPressed event is triggered when tabbing into the cell, and the click event is triggered when clicking the cell. These events can be set to trigger when the cell is in edit mode.

Please refer to the code example sample below for more information.

 [app.component.ts]

 

 created = () => {

        this.grid.element.addEventListener('click', () => {

        if(this.grid.isEdit){

            console.log('clicked')

         }

    })

    }

    

    keyPressed(args){ 

    if(this.grid.isEdit && args.keyCode===9){

      console.log('Key Pressed')

   }

    }

 

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

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Vikram S

[mc r]

Cheers Vikram that is working as intended!

Do you have any extra advice on what calls I should be making to get the current cells data? I am hoping that with each click to a new cell or tab I am able to get the cell data in terms of the column type and the current data.

this.grid.editModule.getCurrentEditCellData(); is as close as I got back it only returns column 1 regardless of which cell I click or tab to in my row.

Thanks
MCR

[Vikram Sundararajan]

Hi MCR,

Thank you for reaching out to us. I understand that you are looking to get the cell data when clicking or tabbing on the cell in your grid. To achieve this, you can use the getAttribute method to get the value of cell. I recommend referring to the code snippet and sample provided below for more information:

 [app.component.ts]

 

 

  created = () => {

        this.grid.element.addEventListener('click', (args) => {

        if(this.grid.isEdit){

            console.log((args.target as any).getAttribute('value'))

         }

    })

    }

    keyPressed(args){ 

    if(this.grid.isEdit && args.keyCode===9){

        console.log((args.target as any).parentElement.parentElement.nextSibling.querySelector('input').getAttribute('value'))

   }

    }

 

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

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Vikram S