Binding UI Grid row data to javascript call in cellTemplate

Question

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

Brian · Accepted Answer · 2017-08-03 12:27:27Z

1

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.

answered Aug 3, 2017 at 12:27

Brian

5,0693 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Binding UI Grid row data to javascript call in cellTemplate

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related