Follow-on from #1489 - Aurelia renderers/template not binding/evaluating as expected

[don-bluelinegrid]

@seanlandsman

Sean,

OK, I converted this piece of implementation over to use the declarative style with the Aurelia plugin, and it works fairly well. I have run into one issue though.

Again, my goal was to use a custom renderer template in a cell. The template looks like this:

        <ag-grid-column header-name="" >
            <ag-cell-template>
                <i if.bind="requestType=='INVITED'" click.delegate="$this.editConnectionRequest([data], 'DECLINE')" class="ico-bin float-right"></i> <i click.delegate="editConnectionRequest([connection], 'ACCEPT', 'CONNECTION_ACCEPTED')" class="ico-circle-right6 float-right"></i>
            </ag-cell-template>
        </ag-grid-column>

What's interesting, and the issue, is that the if.bind is being correctly evaluated and exectued; but the click.delegate is not working correctly. The function editConnectionRequest() exists in the ViewModel (controller) but when I click the element I see this error in the console:

Uncaught Error: editConnectionRequest is not a function
    at getFunction (aurelia-binding.js:1924)
    at CallScope.evaluate (aurelia-binding.js:1527)
    at Listener.callSource (aurelia-binding.js:5064)
    at aurelia-binding.js:5088
    at HTMLDocument.handleDelegatedEvent (aurelia-binding.js:3232)

Do you have any explanation or advice for this?

This is my key use case - provide a custom cell template with clickable icons, whose click event is delegated to an Aurelia ViewModel function.

Thanks, Don

[swalters]

this is a current limitation with the template. You can only bind to variables that the grid column can access. params.context points to ag-grid's context property.

1. bind the grid's context to your view model <ag-grid-aurelia context.bind="{vm:$this}"

2. use that property to access your fields. if.bind="params.context.vm.requestType=='INVITED'"

[don-bluelinegrid]

@swalters

Shane,

I think that you may have misunderstood the issue.

In fact, the if.bind works just fine, as-is, without the need to use context.bind. However, the click.delegate is causing the issue - the function object/property - which is in the same VM scope as the requestType value - is not being found. This seems inconsistent. A function is just a property in the VM. If we can't find/bind to functions, then the template is not particularly useful.

Don

[don-bluelinegrid]

@swalters

Additionally, after changing the template to something like this:

<i click.delegate="params.context.vm.editConnectionRequest([connection], 'ACCEPT', 'CONNECTION_ACCEPTED')" class="ico-circle-right6 float-right"></i>

...the function in click.delegate is still not being found.

[swalters]

can you paste in your entire template?

[don-bluelinegrid]

@swalters

                   <ag-grid-aurelia id="sentRequestsGrid" #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
                                    grid-options.bind="gridOptionsSent"
                                    column-defs.bind="gridOptionsSent.columnDefs"
                                    context.bind="$this"

                        <ag-grid-column header-name="" >
                            <ag-cell-template>
                                <i if.bind="requestType=='INVITED'" click.delegate="$this.editConnectionRequest([data], 'DECLINE')" class="ico-bin float-right"></i> 
<i click.delegate="params.context.vm.editConnectionRequest([connection], 'ACCEPT', 'CONNECTION_ACCEPTED')" class="ico-circle-right6 float-right"></i>
                            </ag-cell-template>
                        </ag-grid-column>

[swalters]

You are binding context to your viewModel without the .vm property, so try params.context.editConnectionRequest.

Or, add the vm property to your context context.bind="{vm:$this}"

I use params.context all over the place in my ag-grid templates and I'm not having any issues.

[don-bluelinegrid]

@swalters

OK, I had a typo - the context.bind and the binding in the template were mismatched. I now have this:

                   <ag-grid-aurelia id="sentRequestsGrid" #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
                                    grid-options.bind="gridOptionsSent"
                                    column-defs.bind="gridOptionsSent.columnDefs"
                                    context.bind="$this"

<i click.delegate="params.context.editConnectionRequest([data], 'ACCEPT', 'CONNECTION_ACCEPTED')" class="ico-circle-right6 float-right"></i>

So, thanks, now I do see my function being called. This was a bit confusing, because I didn't actually see docs about the meaning and use of the context.bind property on the grid.

However, I'm trying to use a template parameter, according to the ag-grid docs, to get the row data object sent as a parameter into my function. In the debugger, I'm seeing the parameter as undefined. Have you been able to get the row's data object in a template?

Don

[swalters]

The template is a cell renderer, so params has all the properties defined here. https://www.ag-grid.com/javascript-grid-cell-rendering/#gsc.tab=0

params.data is your data row.

[don-bluelinegrid]

@swalters

OK, false alarm.

All is working now. I see that I needed to use the params object again, to get access to the row data:

<i click.delegate="params.context.editConnectionRequest([params.data], 'ACCEPT', 'CONNECTION_ACCEPTED')" class="ico-circle-right6 float-right"></i>

[don-bluelinegrid]

@swalters

OK, all is good now.

Thanks much for the assistance.

Don

[seanlandsman]

Thanks @swalters for your help here!

@don-bluelinegrid - can this issue now be closed?

[don-bluelinegrid]

@seanlandsman

Sean, yes, the issue can be closed. However, I'd suggest updating the docs in two ways.

1. In the basic section about cell renderers, make it more clear that the properties like data, node, context, etc. are not exposed directly, but are part of a params object.
2. In the Aurelia cell renderer template section, explicitly state that the cell templates can use the params object, and link to the general section.

Thanks, Don

[seanlandsman]

thanks for the feedback Don - I'll ensure the docs are updated for our next release

thanks