Aurelia KendoUI component - problem report

app.css

.flash-red {
  color: red;
}

app.html

<template>
  <require from="./grid-view"></require>
  <require from="aurelia-kendoui-bridge/grid/grid"></require>
  <require from="aurelia-kendoui-bridge/grid/col"></require>
  <require from="aurelia-kendoui-bridge/common/template"></require>
  <require from="./flash-value-converter"></require>
  <require from="./app.css"></require>

  <grid-view data.bind="data">
      <ak-grid k-data-source.bind="data" k-pageable.bind="pageable" k-sortable.bind="true">
        <ak-col k-title="Value 1" >
          <ak-template>
            <div innerhtml.bind="val1 | flash"></div>
          </ak-template>
        </ak-col>
        <ak-col k-title="Value 2" k-field="val2">
          <ak-template>
            <div innerhtml.bind="val2 | flash"></div>
          </ak-template>
        </ak-col>
        <ak-col k-title="Value 3" k-field="val3">
          <ak-template>
            <div innerhtml.bind="val3 | flash"></div>
          </ak-template>
        </ak-col>
      </ak-grid>
  
  </grid-view>

  
</template>

app.js

export class App {
  data: any[] = [
        { val1: 28, val2: 47, val3: 21 },
        { val1: 17, val2: 19, val3: 36 },
        { val1: 34, val2: 73, val3: 55 }
  ];
  
  attached() {
    setInterval(() => {
      this.data[0].val2 += 14;
      this.data[1].val1 += 3;
      this.data[2].val2 -= 2;
      console.log("Data updated:");
      console.log(this.data);
    }, 4500)
  }  
}

flash-value-converter.js

export class FlashValueConverter {
  toView(value) {
    
    setTimeout(() => {
      $('.flash-red').removeClass('flash-red');
    }, 1500);
    
    return `<span class="flash-red">${value}</span>`;
  }
}

grid-view.html

<template>
    <slot></slot>
</template>

grid-view.js

import { bindable, child, TaskQueue, inject } from 'aurelia-framework';


@inject(TaskQueue)
export class GridViewCustomElement {
    @bindable isBusy;
    @bindable data;
    @child('ak-grid') grid;


    constructor(taskQueue) {
        this._taskQueue = taskQueue;
    }

    get grid() {
        if (this._grid) {
            return this._grid.kWidget;p
        }
    }

    dataChanged(newValue, oldValue) {
        console.log("set Data:", newValue, oldValue);
        if (this.grid && this.grid.dataSource) {
            this.grid.dataSource.data(newValue);
        }
    }

    attached() {
        this._taskQueue.queueTask(() => this.attachGrid());
    }

    detached() {

    }

    saveAsPDF() {
        this.grid.saveAsPDF();
    }

    saveAsExcel() {
        this.grid.saveAsExcel();
    }

    attachGrid() {
        if (this.grid) {
            if (!this.grid.dataSource) {
                this.grid.dataSource = new kendo.data.DataSource();
            }
            this.grid.dataSource.data(this.data);
        }
        this.createNoRecordsTemplate();
    }

    isBusyChanged(newValue) {
        console.log(`Is Busy changed to ${this.isBusy}`);
        if (this.grid) {
            if (this.isBusy) {
                this.showBusyIndicator(this.grid.wrapper);
            }
            else {
                this.removeBusyIndicator(this.grid.wrapper);
            }
        }
    }

    showBusyIndicator(wrapper) {
        this.removeBusyIndicator(wrapper);
        $(wrapper).prepend(this.createBusyMask());
    }

    removeBusyIndicator(wrapper) {
        let busyMasks = $(wrapper[0]).children('.k-busy-mask');
        if (busyMasks.length > 0) {
            for (let busyMask of busyMasks) {
                $(busyMask).remove();
            }
        }
    }

    createBusyMask() {
        let icon = document.createElement('i');
        icon.classList.add('fa');
        icon.classList.add('fa-spinner');
        let busyMask = document.createElement('div');
        busyMask.classList.add('busy');
        busyMask.classList.add('k-busy-mask');
        busyMask.appendChild(icon);
        return busyMask;
    }

    createNoRecordsTemplate() {
        this.grid.options.noRecords = true;
        //Called when the datasource contains no elements to render the empty-block
        grid.noRecordsTemplate = function (obj) {
            let errorContainer = document.createElement('div');
            //We need to wrap the empty-block inside a div of class 'k-grid-norecords' so that Kendo Grid can find it and
            //remove it when the data array is populated
            errorContainer.classList.add('k-grid-norecords');
            errorContainer.innerHTML = `<empty-block is-busy.bind='isBusy' is-empty.bind='true' text='xrcore.no-results-found'></empty-block>`;
            return errorContainer;
        }
    }    
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.2.2/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}

problem-details.md

Add any additional information here