[SOLVED] Binding UI Grid row data to javascript call in cellTemplate

Binding UI Grid row data to javascript call in cellTemplate

I want to call a javascript function from a UI-Grid cellTemplate, passing some of the row's entity values as parameters.

If I call the function directly from the href it gets the 'unsafe' prepended.

If I call it from the onclick attribute it does not bind properly (though does not get the unsafe prepended.)

How should I call it and have it bound properly?

href attempt:

columnDefs: [
    { name: "DocNumber", cellTemplate: '<a href=\'javascript:apci.LoadDoc("{{grid.appScope.selectedPayer.PayerRef}}")\'>{{row.entity.DocNumber}}</a>' },
]

onclick attempt:

columnDefs: [
    { name: "DocNumber", cellTemplate: '<a href="#" onclick=\'javascript:apci.LoadDoc("{{grid.appScope.selectedPayer.PayerRef}}")\'>{{row.entity.DocNumber}}</a>' },
]

Angular 1.5.0 UI-Grid 4.0.6

Solution

I would try wrapping whatever the ..LoadDoc() function is supposed to be in a function in your controller, and set the template like this:

cellTemplate: '<a ng-click="grid.appScope.loadDocFunction(row.entity)>' +
                '{{ row.entity.DocNumber }}' + 
              '</a>"'

Within the loadDocFunction(), you can acquire selectedPayer.PayerRef directly from the controller, and do as you wish with it.

I'm not really clear what javascript:apci:LoadDoc() is, so it is hard to be more precise on how to wrap it nicely.

One simple example of a wrapper pattern in angular is angular-socket-io.