Custom render cells action not triggering in handsontable mode
My html table looks like this:
<hot-table
settings="settings"
row-headers="rowHeaders"
min-spare-rows="minSpareRows"
datarows="myData"
columns="columns"
>
</hot-table>
My parameters:
$scope.columns = [
...
{
data:'name',
readOnly:true,
renderer:$scope.myRenderer
}
];
My renderer:
$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);
}
};
The cell is displayed correctly , but ng-click does not start . I even tried simple a href
but the link doesn't work either. It looks like I need to do something like stopPropagation
or preventDefault
, but where and how to do it?
+2
source to share
1 answer
It might be too late to be of much use to you, but you need $compile
HTML on yours $scope
for the directives to bind to the element. Something like this should do the trick:
$scope.myRenderer = function(hotInstance, td, row, col, prop, value, cellProperties) {
var metaId = hotInstance.getDataAtRowProp(row, 'metaId');
var specificationCode = hotInstance.getDataAtRowProp(row, 'specificationCode');
var value = '<a ng-click=\"openSpecification('+metaId+','+prop+','+specificationCode+')\">'+value+'</a>';
var el = $compile(value)($scope);
if (!(td != null ? td.firstChild : void 0)) {
td.appendChild(el[0]);
}
return td;
};
+1
source to share