Custom Element - Composition/Nested Elements

kendo-grid-column.html

<template>
    <div>
        <content></content>
    </div>
</template>

kendo-grid-column.ts

import {inject, customElement, bindable} from 'aurelia-framework';
import {OptionalParent} from './optional-parent';
import {KendoGrid} from './kendo-grid';

@inject(Element, OptionalParent.of(KendoGrid))
export class KendoGridColumn {

    element: HTMLElement;

    @bindable field: string;
    @bindable title: string;
    @bindable format: string;

    constructor(element, kendoGrid: KendoGrid) {
        this.element = element;

        kendoGrid.columns.push(this);
    }
}

kendo-grid.ts

import {inject, processContent, customAttribute, bindable, sync, ViewCompiler, ViewSlot, Container, ViewResources, TargetInstruction} from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';

import {Compiler} from '../kendo/compiler';
import * as kendoUi from 'kendo-ui';
import {KendoGridColumn} from './kendo-grid-column';

@inject(Element, Compiler, EventAggregator, TargetInstruction)
export class KendoGrid {

    element: HTMLElement;

    widget: any;
    columns: KendoGridColumn[] = [];
    model: any = null;

    @bindable selectable: boolean;
    @bindable filterable: boolean;
    @bindable pageable: boolean;
    @bindable sortable: boolean;
    @bindable pageSize: number = 10;
    @bindable page: number = 1;
    @bindable selectedItem: any;
    @bindable selectedItems: any[];
    @bindable autoBind: boolean;
    @bindable editable: boolean;
    @bindable toolbar: any[];

    @bindable refreshFlag: any;
    @bindable read: any;

    aggregator: EventAggregator;
    compiler: Compiler;
    dataSource: kendo.data.DataSource;

    constructor(element, compiler, aggregator, targetInstruction) {
        this.element = element;
        this.compiler = compiler;
        this.aggregator = aggregator;

        kendo.culture("en-GB");

        //this.columns = targetInstruction.behaviorInstructions[0].kendoGridColumns;
        //this.model = targetInstruction.behaviorInstructions[0].kendoDataSourceModel;
    }

    bind(ctx) {
        this["$parent"] = ctx;

        // Post parse the templates in "columns"
        this.columns.forEach(c => {
            if (c.hasOwnProperty("template")) {

                // If there's no template string it must be the first time we are visiting the columns
                // Push the template string into a new property and wrap the string with a func to compile the template
                if (!c.hasOwnProperty("templateString"))
                    c["templateString"] = c["template"];

                c["template"] = (dataItem) => {
                    try {
                        var cellctx = { "$item": dataItem, "$parent": ctx };
                        return this.compiler.compile(c["templateString"], cellctx).fragment.innerHTML;
                    }
                    catch (ex) {
                        console.error(ex);
                    }
                }
            }
        });
    }

    refreshFlagChanged() {
        this.refresh();
    }

    selectedItemChanged() {
    }

    attached() {

        // Create the datasource
        this.dataSource = new kendoUi.data.DataSource({
            serverFiltering: true,
            serverSorting: true,
            serverPaging: true,
            page: this.page,
            pageSize: this.pageSize,
            schema: {
                data: "data",
                total: "total",
                model: this.model
            },
            transport: {
                read: (options) => {

                    // Check if we have a grid read setup
                    if (!this.read) {
                        console.warn("No read method provided to Kendo Grid");
                        options.error([]);
                        return;
                    }
                    
                    // User can transform the kendo options
                    return Promise.resolve(this.read(options.data))
                        .then(e => {
                            return options.success(e);
                        })
                        .catch(e => {
                            return options.error([]);
                        });
                }
            }
        });

        // Create the widget
        $(this.element).kendoGrid({
            dataSource: this.dataSource,
            columns: this.columns,
            filterable: this.filterable,
            pageable: this.pageable,
            selectable: this.selectable,
            sortable: this.sortable,
            autoBind: this.autoBind,
            editable: this.editable,
            toolbar: this.toolbar,
            // Row selection
            change: (e) => {
                var selectedRows = this.widget.select();

                var selectedItems = Array.prototype.slice.call(selectedRows).map(row => {
                    return this.widget.dataItem(row);
                });

                this.selectedItem = selectedItems[0];
                this.selectedItems = selectedItems;
            }
        });

        this.widget = $(this.element).data("kendoGrid");
    }

    refresh() {
        if (this.widget)
            this.widget.dataSource.read();
    }

    detached() {
        $(this.element).data("kendoGrid").destroy();
    }
}

optional-parent.ts

import {Resolver} from 'aurelia-dependency-injection';

export class OptionalParent extends Resolver {
    key: any;

    constructor(key) {
        super();
        this.key = key;
    }

    get(container) {
        if (container.parent && container.parent.hasHandler(this.key, false)) {
            return container.parent.get(this.key)
        }
        return null;
    }

    static of(key) {
        return new OptionalParent(key);
    }
}