[Solved] Angular expression in column template in HTML file

[Evan]

I have a grid defined in my HTML file including column definitions like the following:

<div ng-controller="scoreController as score">
    <div kendo-grid="score.grid"
         k-on-change="score.change(kendoEvent)"
         k-height="500"
         k-columns="[
                {
                    field: 'CustID',
                    title: 'ID',
                },
                {
                    field: 'QuarterName',
                    title: 'Quarter',
                },
                {
                    field: 'ClaimAmount' ,
                    title: 'Claim Amount' ,
                    template: '{{dataItem.ClaimAmount | currency}}'
                },
                ]"
         k-options="score.gridOptions"
         k-pageable="true"
         k-scrollable="true"
         k-selectable="true"
         k-sortable="true"></div>
</div>

The data source is defined in the controller.
I could not get the angular expression in the ClaimAmount template to work. It does work if I move the column definitions to the controller js file, but I would prefer to have them in the HTML. Is there a way to make this work in the HTML? All the samples I have seen define the columns in script.
Thanks.

[Mihai]

Hi,

No, this cannot be supported because Angular will convert the template to an empty string before our directive even runs.  You must place it in the controller.

One workaround would be something like this:

    k-columns="... { template: getTemplate('#my-template')  } ..."

and then place the template in a script tag:

    <script type="x/kendo-template" id="my-template">{{ dataItem.ClaimAmount | currency }}</script>

and define getTemplate in your scope:

    $scope.getTemplate = function(selector) { return $(selector).html() };

Regards,
Mihai
Telerik