angularjsignite-uiiggrid

Custom component not loading in ig-grid column template

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>
Solution

  • 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.