1

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>
joonash
  • 33
  • 1
  • 8

1 Answers1

2

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.

Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
dkamburov
  • 396
  • 1
  • 7
  • Thank you for answering. However, my ig-grid is also in component, so there is no $scope or $compile. Is it possible to override IgniteUI templating inside component? I already solved above problem by using simple ng-repeat instead of ig-grid, but it would be nice to get this working in case of future implementations. – joonash Jan 27 '17 at 11:50
  • 2
    Sure, you can override the IgniteUI template wherever you want. But if you want to use AngularJS templating instead, you need to $compile the template in order to get fully functional AngularJS component or directive. – dkamburov Jan 27 '17 at 12:26
  • Okay, so there is no way to get this working without using $compile. Thank you, I guess I need to use directive instead of component next time I need ig-grid like this. – joonash Jan 30 '17 at 05:35