AngularJS not working in a column template inside the detail grid template

[Wim]

I am using Angular and Kendo, and have set up a simple grid with a detail template. Everything works fine, until I try to use Angular inside a column template in the detail grid.

I am using these two templates:

<script id="order-checked-template" type="text/x-kendo-template">
    <input type="checkbox" #: Checked ? 'checked="checked"' : '' # ng-click="ctrl.toggleLines($event)" />
</script>

<script id="line-checked-template" type="text/x-kendo-template">
    <input type="checkbox" #: Checked ? 'checked="checked"' : '' # ng-click="ctrl.toggleOrder($event)" />
</script>

The first template order-checked-template is a column template for the main grid. It creates a checkbox for a boolean field and triggers the toggleLines function on the angular controller. This part works!

The second template, line-checked-template, is a column template for the detail grid. It also creates a checkbox for a boolean field, and should trigger the toggleOrder function on the angular controller. However, it seems that the ng-click directive is not parsed when the detail grid is generated and the template is parsed.

Following the tutorial on a hierarchy grid, I configured the grid like this:

01.vm.gridOptions = {
02.    columns: [
03.        { field: 'Checked', template: kendo.template($("#order-checked-template").html()) }
04.        // other columns
05.    ],
06.    dataSource: {
07.        schema: {
08.            model: {
09.                id: 'VO_URID',
10.                fields: {
11.                    Checked: { type: 'boolean' }
12.                    // other fields
13.                }
14.            }
15.        }
16.    },
17.    detailInit: detailInit,
18.};

Where detailInit is:

01.function detailInit(e) {
02.    $("<div class=\"detailGrid\"/>").appendTo(e.detailCell).kendoGrid({
03.        columns: [
04.            { field: 'Checked', template: kendo.template($("#regel-checked-template").html()) }
05.            // other columns
06.        ],
07.        dataSource: {
08.            schema: {
09.                model: {
10.                    id: 'VOR_URID',
11.                    fields: {
12.                        Checked: { type: 'boolean' }
13.                        // other fields
14.                    }
15.                }
16.            }
17.        }
18.    });
19.}

And the grid is created like this in the HTML template:

<div id="grid-vo" kendo-grid k-options="ctrl.gridOptions"></div>

[Wim]

In translating my code, I have made a typo. Where it says:

[quote]kendo.template($("#regel-checked-template").html()[/quote]

It should actually be kendo.template($("#line-checked-template").html()

So this is actually correctly referenced in my code.

[Genady Sergeev]

Hi Wim,

Can you try removing the ctrl from the function invocation i.e. ng-click should look like this:

ng-click="toggleOrder($event)"

It seems that there is an issue with invoking function from controller as syntax.

I've applied the approach to the following example and it seems to work.

Regards,
Genady Sergeev
Telerik