I'm trying to use custom made component in ig-grid column template. Component is rendered correctly in Html, but it never reaches component's constructor. How is it possible to use custom component in column template?
<script id="colTmpl" type="text/template">
<custom-component data="${datatouse}"></custom-component>
</script>
<div>
<ig-grid id="grid1" data-source="vm.datasource" width="100%" primary-key="Id" auto-generate-columns="false" autocommit="true">
<columns>
<column key="Id" header-text="Id" width="50px" data-type="number" hidden="hidden"></column>
<column key="datatouse" width="100%" header-text="my custom component" datatype="object" template="{{getHtml('#colTmpl')}}"></column>
</columns>
</ig-grid>
</div>
You can override the Ignite UI templating ($.ig.tmpl
) and apply your custom component to the cells.
$.ig.tmpl = function (tmpl, data) {
angCells.push($compile(tmpl)($scope));
return "";
}
Here's a fiddle.