Custom cell renderer action not triggered

[BaurzhanSakhariev]

My table html looks like:

<hot-table
                     settings="settings"
                      row-headers="rowHeaders"
                      min-spare-rows="minSpareRows"
                      datarows="myData"
                      columns="columns"
                         >
</hot-table>

My options:

$scope.columns = [
      ...
        {
            data:'name',
           readOnly:true,
            renderer:$scope.myRenderer

        }
    ];

$scope.myRenderer = function(hotInstance, td, row, col, prop, value, cellProperties) {
        var metaId = hotInstance.getDataAtRowProp(row, 'metaId');
        var specificationCode = hotInstance.getDataAtRowProp(row, 'specificationCode');
        if(value && specificationCode) {
            td.innerHTML = '<a ng-click=\"openSpecification('+metaId+','+prop+','+specificationCode+')\">'+value+'</a>';
            console.log(td.innerHTML);
        }
    };

Cell rendered properly but ng-click not triggered. I even tried just a href but link also not working. Looks like I have to make someting like stopPropagation or preventDefault but where and how should I do that?

[ARezaK]

having the same problem. Did you figure out a solution?

[gobbledygook88]

One way might be to manually compile the HTML via the Angular $compile service.
Have yet to measure the impact this has on a large dataset or whether there is a better way.

$scope.myRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    var el = $compile('<a ng-click="openSpecification()"></a>')($scope);
    if(!td.firstChild) {
        td.appendChild(el[0]);
    }
    return td;
}

[ARezaK]

Does that actually work for you? It seems like the actual html renders(even javascript calls work), however ng-click does not seem to...

[gobbledygook88]

I managed to get it working with an ng-click on an input[type="checkbox"] in a rather complex scenario (which is how I came across this method).
Here is a smaller example which may be of help: http://jsfiddle.net/marcusmo/emzu3yde/1/

[estvmachine]

Hi, i think this is exactly what i searching BUT is for this example: https://docs.handsontable.com/0.21.0/demo-conditional-formatting.html

I dont know how to make 'conditional formatting' in the version of angular.

[ARezaK]

@gobbledygook88 That works! Thanks so much!!

[estvmachine]

@gobbledygook88 Hi, you can help me here in the #136

[BaurzhanSakhariev]

@gobbledygook88, Thanks!

[BaurzhanSakhariev]

I'm sorry, compile works fine, but it seems it works only for none click or mouse related events/directives. For example, ng-options+ng-model works fine but, typeahed directive or even simple ng-click not working. I suspect, this is because ng-click or typeahed directives under the hood based on click events. I'm sure that I have to disable on cell click/ on mouse over events of handsontable but I couldn't. I tried to use event.stopPropogation in beforeOnCellMouseDown but failed.

I understand that I may lose ctrl+c and ctrl+v functions like in excel or selecting ranges but I really want to use typeaehed please help me.

[AMBudnik]

I think that we can close this issue as it hasn't been updated for a long time.