Handling grid events (endEdit, endAdd etc.) correctly (TypeScript only)

[David Sheardown]

Hi there,

In the essential JS 1 grid, we could have endEdit: function (args) to determine/retrieve the edited row for example, however in the new essential JS 2 grid, I see there is a combined event for action complete, however I seem to also be able to do the following.

So is that the best way to detect an endEdit event?  if so, how can I access the grid data in general, but specifically the row edited?

Many thanks in advance.

let myGrid: Grid = new Grid({

//dataSource: dataService.data,

dataSource: returnJsonData.data,

            ... etc, etc.

});

myGrid.endEdit () => {

             console.log('here');

     }

[Pavithra Subramaniyam]

Hi David,   

  

We have checked your query and you can achieve your requirement(access to the grid data in general, but specifically the row edited) by using “actionComplete” event with request type ‘save’ which will be triggered before saving the edited record. Please refer to the following code example and sample link.   

  

let grid: Grid = new Grid({   

    dataSource: data,   

    .   .   .   

    columns: [   

        { field: 'OrderID', headerText: 'Order ID', textAlign: 'right', width: 100, isPrimaryKey: true },   

        .  .   .   

    ],   

    actionComplete:complete   

});   

grid.appendTo('#Grid');   

function complete (args:EditEventArgs){   

// triggers after editing the record   

  if(args.requestType ==='save'){       

  alert(args.data.OrderID);              // edited record data   

  alert(grid.dataSource.length);     //Grid dataSource   

  }   

}   

  

   

  

Sample Link: http://plnkr.co/edit/WIswnSaT6tEoYdpaDEyL?p=preview    

  

Regards,   

Pavithra S.   

[David Sheardown]

Brilliant!

Thanks for the reply!

I saw the actionComplete, however I was obviously used to the Essential JS 1 event handlers.

I can now see all of the "rowData" properties and so on.

Thanks again for responding!

[David Sheardown]

Actually, just a note:

I think perhaps this is more due to TypeScript and the EJS2 type definitions where there is an issue that "args.data" doesn't resolve i.e. TypeScript doesn't see ".data" in the type definition perhaps?

Quite possibly I have my tsconfig.json with strict policies maybe.  To be honest, the whole TypeScript/WebPack/Gulp thing is pretty new to me.. I downloaded the GIT ESJ2 starter with WebPack to bundle etc. and that came with a default tsconfig.json.

Anyway, the way around it for me was to simply have the function complete (args:EditEventArgs){   changed to "function complete(args: any) and now I can access the args.data or whatever normally.

Not sure if this is something that will be fixed in future @types updates perhaps?  no big deal as mentioned, just curious!

Thank you again though, I thought to post this in case it helps others, but it is certainly working well now :)

[Pavithra Subramaniyam]

Hi David, 

Sorry for the inconvenience caused. 

You can use “SaveEventArgs” as the argument type in “actionComplete” event to achieve your requirement. Please refer to the following code example. 

function complete (args: SaveEventArgs) { 

  if (args.requestType === 'save') { 

      console.log(args.data); 

  } 

} 

Regards, 

Pavithra S. 

[David Sheardown]

Oh!  I am silly!

I didn't even notice the saveEventArgs!

Sorted! perfect!!

Many thanks for your help!

[Pavithra Subramaniyam]

Hi David, 

Thanks for your update. 

We are glad to hear that the provided solution helped you. 

Please contact us if you have any queries. 

Regards, 

Pavithra S.