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

3 posts, 0 answers
  1. Wim
    Wim avatar
    16 posts
    Member since:
    Oct 2014

    Posted 20 Apr 2016 Link to this post

    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>

  2. Wim
    Wim avatar
    16 posts
    Member since:
    Oct 2014

    Posted 20 Apr 2016 Link to this post

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

    kendo.template($("#regel-checked-template").html()

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

    So this is actually correctly referenced in my code.

  3. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1600 posts

    Posted 20 Apr 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top