aurelia-ui-toolkits / aurelia-kendoui-bridge

MIT License
117 stars 31 forks source link

rebuilding skeleton-plugin-kendo #364

Closed adriatic closed 8 years ago

adriatic commented 8 years ago

The two repositories https://github.com/aurelia-ui-toolkits/skeleton-plugin-kendo and https://github.com/aurelia-ui-toolkits/skeleton-navigation-kendo contain finished tutorials for bridge developers and application developers respectively.

The problem I am having is with upgrading the current version "skeleton-plugin-kendo" since the code for the Aurelia-KendoUI bridge plugin side has changed a lot from the time the current version "skeleton-plugin-kendo" was written. Of course, I have to change it - as this is the tutorial for bridge developers and it has to show the latest methodology for building that bridge

My bridge tutorial creates the wrappers for four selected controls (autocomplete, button, chart (lines) and grid (basic use) added to the standard (nearly empty) aurelia skeleton plugin. This code is highlighted in blue

image

I have also copied the most current "infrastructure code" marked in red.

In order to prevent too much typing, here is the problem

Unhandled promise rejection TypeError: this.kendoButton(...).kendoTabStrip is not a function
    at KendoConfigBuilder.core (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/config-builder.js:18:26)
    at KendoConfigBuilder.pro (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/config-builder.js:23:12)
    at http://localhost:9000/src/main.js!transpiled:8:20
    at r.configure (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/index.js:14:7)
    at http://localhost:9000/jspm_packages/npm/aurelia-framework@1.0.0-beta.1.1.3/aurelia-framework.js:34:34
    at run (http://localhost:9000/jspm_packages/npm/core-js@2.1.0/modules/es6.promise.js:115:49)
    at http://localhost:9000/jspm_packages/npm/core-js@2.1.0/modules/es6.promise.js:129:9

The plugin's config-builder.js

/**
* Configure the Aurelia-KendoUI-plugin
*/
export class KendoConfigBuilder {

    resources: string[] = [];
  useGlobalResources: boolean = true;

  /**
  * Globally register all Kendo Core wrappers
  */
  core(): KendoConfigBuilder {
    this.kendoAutoComplete()
      .kendoButton();
    return this;
  }

  /**
  * Globally register all Kendo Core and Kendo Pro wrappers
  */
  pro(): KendoConfigBuilder {
    this.core()
      .kendoGrid()
      .kendoChart();
    return this;
  }

  /**
  * Don't globalize any resources
  * Allows you to import wrappers yourself via <require></require>
  */
  withoutGlobalResources(): KendoConfigBuilder {
    this.useGlobalResources = false;
    return this;
  }

  kendoAutoComplete(): KendoConfigBuilder {
    this.resources.push('autocomplete/autocomplete');
    return this;
  }

  kendoButton(): KendoConfigBuilder {
    this.resources.push('button/button');
    return this;
  }

  kendoGrid(): KendoConfigBuilder {
    this.resources.push('grid/grid');
    this.resources.push('grid/k-col');
    return this;
  }

  kendoChart(): KendoConfigBuilder {
    this.resources.push('chart/chart');
    return this;
  }
}

Diagnosis

I do not understand how the registration of the wrappers work as I registered the two core wrappers under the title Globally register all Kendo Core wrappers and the other two being used in this tutorial under Globally register all Kendo Core and Kendo Pro wrappers - appended to core set

adriatic commented 8 years ago

Update 11:31 AM

Why is the config-builder compiled into

/* */ 
define(['exports'], function (exports) {
  'use strict';

  exports.__esModule = true;

  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

  var KendoConfigBuilder = (function () {
    function KendoConfigBuilder() {
      _classCallCheck(this, KendoConfigBuilder);

      this.resources = [];
      this.useGlobalResources = true;
    }

    KendoConfigBuilder.prototype.core = function core() {
      this.kendoButton().kendoTabStrip().kendoProgressBar().kendoSlider().kendoColorPicker().kendoDropDownList();
      return this;
    };

    KendoConfigBuilder.prototype.pro = function pro() {
      this.core().kendoGrid().kendoAutoComplete().kendoChart();
      return this;
    };

    KendoConfigBuilder.prototype.withoutGlobalResources = function withoutGlobalResources() {
      this.useGlobalResources = false;
      return this;
    };

    KendoConfigBuilder.prototype.kendoAutoComplete = function kendoAutoComplete() {
      this.resources.push('autocomplete/autocomplete');
      return this;
    };

    KendoConfigBuilder.prototype.kendoButton = function kendoButton() {
      this.resources.push('button/button');
      return this;
    };

    KendoConfigBuilder.prototype.kendoGrid = function kendoGrid() {
      this.resources.push('grid/grid');
      this.resources.push('grid/k-col');
      return this;
    };

    KendoConfigBuilder.prototype.kendoChart = function kendoChart() {
      this.resources.push('chart/chart');
      return this;
    };

    return KendoConfigBuilder;
  })();

  exports.KendoConfigBuilder = KendoConfigBuilder;
});

What causes this monstrosity

KendoConfigBuilder.prototype.core = function core() {
      this.kendoButton().kendoTabStrip().kendoProgressBar().kendoSlider().kendoColorPicker().kendoDropDownList();
      return this;
    };
adriatic commented 8 years ago

Do I need to have these in config-builder?

  /**
  * Registers value converters (wrappers around kendo functions)
  */
  useValueConverters(): KendoConfigBuilder {
    this.resources.push('valueconverters/valueconverters');
    return this;
  }

  /**
  * Adds kendo templating support
  */
  kendoTemplateSupport(): KendoConfigBuilder {
    this.resources.push('common/k-template');
    return this;
  }
JeroenVinke commented 8 years ago

Do I need to have these in config-builder?

Yes

JeroenVinke commented 8 years ago

Why is the config-builder compiled into

I do not get this when building https://github.com/aurelia-ui-toolkits/skeleton-plugin-kendo

Are you sure you're looking in the right project (and the right dist folder)?

adriatic commented 8 years ago

I should have pointed out that this "monstrosity" is visible in Chrome debugger

image

The console view of this same problem is

EBUG [aurelia] Loading plugin aurelia-kendoui-plugin.
es6.promise.js:150 Unhandled promise rejection TypeError: this.kendoButton(...).kendoTabStrip is not a function
    at KendoConfigBuilder.core (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/config-builder.js:18:26)
    at KendoConfigBuilder.pro (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/config-builder.js:23:12)
    at http://localhost:9000/src/main.js!transpiled:8:20
    at r.configure (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/index.js:14:7)
    at http://localhost:9000/jspm_packages/npm/aurelia-framework@1.0.0-beta.1.1.3/aurelia-framework.js:34:34
    at run (http://localhost:9000/jspm_packages/npm/core-js@2.1.0/modules/es6.promise.js:115:49)
    at http://localhost:9000/jspm_packages/npm/core-js@2.1.0/modules/es6.promise.js:129:9
    at MutationObserver.flush (http://localhost:9000/jspm_packages/npm/core-js@2.1.0/modules/_microtask.js:25:7)(anonymous function) @ es6.promise.js:150module.exports @ _invoke.js:5queue.(anonymous function) @ _task.js:36run @ _task.js:23listner @ _task.js:27
es6.promise.js:150 Unhandled promise rejection TypeError: this.kendoButton(...).kendoTabStrip is not a function(…)(anonymous function) @ es6.promise.js:150module.exports @ _invoke.js:5queue.(anonymous function) @ _task.js:36run @ _task.js:23listner @ _task.js:27
es6.promise.js:150 Unhandled promise rejection TypeError: this.kendoButton(...).kendoTabStrip is not a function(…)

I will add the missing lines from the config-builder

JeroenVinke commented 8 years ago

caching?

JeroenVinke commented 8 years ago

what does dist/amd/config-builder.js look like

adriatic commented 8 years ago
define(['exports'], function (exports) {
  'use strict';

  exports.__esModule = true;

  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

  var KendoConfigBuilder = (function () {
    function KendoConfigBuilder() {
      _classCallCheck(this, KendoConfigBuilder);

      this.resources = [];
      this.useGlobalResources = true;
    }

    KendoConfigBuilder.prototype.core = function core() {
      this.kendoAutoComplete().kendoButton().kendoTabStrip();
      return this;
    };

    KendoConfigBuilder.prototype.pro = function pro() {
      this.core().kendoGrid().kendoChart();
      return this;
    };

    KendoConfigBuilder.prototype.withoutGlobalResources = function withoutGlobalResources() {
      this.useGlobalResources = false;
      return this;
    };

    KendoConfigBuilder.prototype.kendoAutoComplete = function kendoAutoComplete() {
      this.resources.push('autocomplete/autocomplete');
      return this;
    };

    KendoConfigBuilder.prototype.kendoButton = function kendoButton() {
      this.resources.push('button/button');
      return this;
    };

    KendoConfigBuilder.prototype.kendoGrid = function kendoGrid() {
      this.resources.push('grid/grid');
      this.resources.push('grid/k-col');
      return this;
    };

    KendoConfigBuilder.prototype.kendoChart = function kendoChart() {
      this.resources.push('chart/chart');
      return this;
    };

    KendoConfigBuilder.prototype.kendoTabStrip = function kendoTabStrip() {
      this.resources.push('tabstrip/tabstrip');
      return this;
    };

    return KendoConfigBuilder;
  })();

  exports.KendoConfigBuilder = KendoConfigBuilder;
});
JeroenVinke commented 8 years ago

That's how it should be. How come your browser is showing you something different? How did you install the plugin in the consuming application?

JeroenVinke commented 8 years ago

How did you install the plugin in the consuming application?

if you ran jspm install aurelia-kendoui-plugin=github:aurelia-ui-toolkits/skeleton-plugin-kendo, you need to run it again so it downloads the latest files out of the dist folder

adriatic commented 8 years ago

if you ran jspm install aurelia-kendoui-plugin=github:aurelia-ui-toolkits/skeleton-plugin-kendo, you need to run it again so it downloads the latest files out of the dist folder

This ought to be it - as I am running using my default desktop application mode (I was saved from that silliness by the bridge having both the producer and the consumer in the same app :-)

adriatic commented 8 years ago

2/21/2016

Both repos

  1. https://github.com/aurelia-ui-toolkits/skeleton-navigation-kendo
  2. https://github.com/aurelia-ui-toolkits/skeleton-plugin-kendo

are updated to the point where I would like you to inspect what is happening (and if you find what is wrong, to tell me that as well :-)

All package.json and config.js have to be trimmed to the size (no reason to keep a single unneeded reference there as this is the tutorial that needs to be perfect)

We need to ensure that each pair [package.json, config.js] is in a mutually consistent state.

I will do all that, once seeing that the tutorials work

Two remaining issues:

1 Line Chart fails with here

image

with stack trace below:

ERROR [app-router] Error: Error invoking Chart. Check the inner error for details.
------------------------------------------------
inner error: Error: The name of control kendoChart is invalid or not set
    at WidgetBase.control (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/common/widget-base.js:20:15)
    at new Chart (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/chart/chart.js:31:36)
    at Object.invoke (http://localhost:9000/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.1.3/aurelia-dependency-injection.js:344:14)
    at InvocationHandler.invoke (http://localhost:9000/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.1.3/aurelia-dependency-injection.js:309:168)
    at Container.invoke (http://localhost:9000/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.1.3/aurelia-dependency-injection.js:557:25)
    at ProviderResolver.get (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:1562:74)
    at Container.get (http://localhost:9000/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.1.3/aurelia-dependency-injection.js:494:23)
    at Container.elementContainerGet [as get] (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:1615:17)
    at HtmlBehaviorResource.create (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:3489:58)
    at applyInstructions (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:1693:33)
    at WidgetBase.control (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/common/widget-base.js:20:15)
    at new Chart (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/chart/chart.js:31:36)
    at Object.invoke (http://localhost:9000/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.1.3/aurelia-dependency-injection.js:344:14)
    at InvocationHandler.invoke (http://localhost:9000/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.1.3/aurelia-dependency-injection.js:309:168)
    at Container.invoke (http://localhost:9000/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.1.3/aurelia-dependency-injection.js:557:25)
    at ProviderResolver.get (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:1562:74)
    at Container.get (http://localhost:9000/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.1.3/aurelia-dependency-injection.js:494:23)
    at Container.elementContainerGet [as get] (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:1615:17)
    at HtmlBehaviorResource.create (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:3489:58)
    at applyInstructions (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:1693:33)
    at new AggregateError (http://localhost:9000/jspm_packages/npm/aurelia-pal@1.0.0-beta.1.1.1/aurelia-pal.js:20:13)
    at Container.invoke (http://localhost:9000/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.1.3/aurelia-dependency-injection.js:559:15)
    at ProviderResolver.get (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:1562:74)
    at Container.get (http://localhost:9000/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.1.3/aurelia-dependency-injection.js:494:23)
    at Container.elementContainerGet [as get] (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:1615:17)
    at HtmlBehaviorResource.create (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:3489:58)
    at applyInstructions (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:1693:33)
    at ViewFactory.create (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:1917:9)
    at HtmlBehaviorResource.create (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:3501:41)
    at http://localhost:9000/jspm_packages/npm/aurelia-templating-router@1.0.0-beta.1.1.1/router-view.js:96:51

2 Grid renders incorrrectly:

image

Stack trace

GET http://demos.telerik.com/kendo-ui/content/web/Customers/.jpg 404 (Not Found)curCSS @ jquery.js:5562jQuery.extend.css @ jquery.js:6027isHidden @ jquery.js:4022showHide @ jquery.js:5883jQuery.fn.extend.show @ jquery.js:6136jQuery.fn.(anonymous function) @ jquery.js:6828d.extend.init @ kendo.pager.min.js:25ue.ui.DataBoundWidget.extend._pageable @ kendo.grid.min.js:27ue.ui.DataBoundWidget.extend.init @ kendo.grid.min.js:25(anonymous function) @ kendo.core.min.js:26jQuery.extend.each @ jquery.js:374jQuery.fn.jQuery.each @ jquery.js:139e.fn.(anonymous function) @ kendo.core.min.js:26_createWidget @ widget-base.js:105createWidget @ widget-base.js:84recreate @ grid.js:55attached @ grid.js:47attached @ aurelia-templating.js:2920attached @ aurelia-templating.js:1044add @ aurelia-templating.js:1297(anonymous function) @ router-view.js:117run @ es6.promise.js:115(anonymous function) @ es6.promise.js:129flush @ _microtask.js:25
JeroenVinke commented 8 years ago
  1. The kendo chart is not imported because the import statements are missing here

You mean these

import 'kendo.dataviz.chart.min';
import 'kendo.dataviz.chart.polar.min';
import 'kendo.dataviz.chart.funnel.min';

I specifically looked at these and decided that these are not needed in the basic use lines chart. Brilliant deduction :-(

JeroenVinke commented 8 years ago

\2. Column templates (the html inside a k-col) needs to be wrapped in <k-template>

This is a breaking change in 0.3.0 to allow for multiple templates (template, headerTemplate, footerTemplate)

adriatic commented 8 years ago

Column templates (the html inside a k-col) needs to be wrapped in

That is another relatively new thing that I did not "cement" in my brain. Also, this requirement was no present in http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid/basic-use - which is where I looked at to confirm that my sample is right!

adding k-template shows the next problem

Unhandled promise rejection Error: Invalid template property name: "undefined", valid values are: aggregates, attributes, columns, command, encoded, field, filterable, footerTemplate, format, groupFooterTemplate, groupHeaderTemplate, groupable, headerAttributes, headerTemplate, hidden, lockable, locked, menu, minScreenWidth, sortable, template, title, values, width, editor, widget(…)(anonymous function) @ :9000/jspm_packages/npm/core-js@2.1.0/modules/es6.promise.js:150

I believe that this is the problem with core.js

JeroenVinke commented 8 years ago

Also, this requirement was no present in http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid/basic-use - which is where I looked at to confirm that my sample is right!

I changed my comment and added this sentence:

This is a breaking change in 0.3.0 to allow for multiple templates (template, headerTemplate, footerTemplate)

as 0.3.0 is not released yet, the samples in http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid/basic-use reflect 0.2.0

JeroenVinke commented 8 years ago

https://github.com/aurelia-ui-toolkits/skeleton-plugin-kendo/blob/master/src/config-builder.js

I believe this needs kendoTemplateSupport()

adriatic commented 8 years ago

Yes, I understand and everything is fine. Had I just seen your comment without running into a trouble like I did, it would not mean as much :-)

adriatic commented 8 years ago

still seeing

Unhandled promise rejection Error: Invalid template property name: "undefined", valid values are: aggregates, attributes, columns, command, encoded, field, filterable, footerTemplate, format, groupFooterTemplate, groupHeaderTemplate, groupable, headerAttributes, headerTemplate, hidden, lockable, locked, menu, minScreenWidth, sortable, template, title, values, width, editor, widget
    at http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/common/util.js:102:15
    at Array.forEach (native)
    at r.useTemplates (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/common/util.js:98:15)
    at Col.bind (http://localhost:9000/jspm_packages/github/aurelia-ui-toolkits/skeleton-plugin-kendo@master/grid/k-col.js:23:19)
    at View.bind (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:942:24)
    at Controller.bind (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:2873:19)
    at View.bind (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:948:24)
    at View.bind (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:953:21)
    at Controller.bind (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:2873:19)
    at Controller.automate (http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.1/aurelia-templating.js:2819:12)(anonymous function) @ es6.promise.js:150module.exports @ _invoke.js:5queue.(anonymous function) @ _task.js:36run @ _task.js:23listner @ _task.js:27

where

  function useTemplates(target, controlName, templates) {
    var controlProperties = (_aureliaDependencyInjection.Container.instance || new _aureliaDependencyInjection.Container()).get(_controlProperties.ControlProperties);
    var templateProps = controlProperties.getTemplateProperties(controlName);

    templates.forEach(function (c) {
      if (templateProps.indexOf(c['for']) > -1) {
        target[getBindablePropertyName(c['for'])] = c.template;
      } else {
        throw new Error('Invalid template property name: "' + c['for'] + '", valid values are: ' + templateProps.join(', '));
      }
    });
  }

grid view

     <k-col k-title="Contact Name" k-field="ContactName">
        <k-template>
          <div class='customer-photo' style="background-image: url(http://demos.telerik.com/kendo-ui/content/web/Customers/${CustomerID}.jpg);"></div>
          <div class='customer-name'>${ContactName}</div>
        </k-template>
      </k-col>
      <k-col k-title="Contact Name" k-field="ContactName"></k-col>
      <k-col k-title="Contact Title" k-field="ContactTitle"></k-col>
      <k-col k-title="Company Name" k-field="CompanyName"></k-col>
      <k-col k-field="Country"></k-col>
    </k-grid>

config-builder

* Configure the Aurelia-KendoUI-plugin
*/
export class KendoConfigBuilder {

    resources: string[] = [];
  useGlobalResources: boolean = true;

  /**
  * Globally register all Kendo Core wrappers
  */
  core(): KendoConfigBuilder {
    this.kendoAutoComplete()
      .kendoButton()
      .kendoTabStrip();
    return this;
  }

  /**
  * Globally register all Kendo Core and Kendo Pro wrappers
  */
  pro(): KendoConfigBuilder {
    this.core()
      .kendoGrid()
      .kendoChart();
    return this;
  }

  /**
  * Don't globalize any resources
  * Allows you to import wrappers yourself via <require></require>
  */
  withoutGlobalResources(): KendoConfigBuilder {
    this.useGlobalResources = false;
    return this;
  }

    /**
  * Registers value converters (wrappers around kendo functions)
  */
  useValueConverters(): KendoConfigBuilder {
    this.resources.push('valueconverters/valueconverters');
    return this;
  }

  /**
  * Adds kendo templating support
  */
  kendoTemplateSupport(): KendoConfigBuilder {
    this.resources.push('common/k-template');
    return this;
  }

  kendoAutoComplete(): KendoConfigBuilder {
    this.resources.push('autocomplete/autocomplete');
    return this;
  }

  kendoButton(): KendoConfigBuilder {
    this.resources.push('button/button');
    return this;
  }

  kendoGrid(): KendoConfigBuilder {
    this.resources.push('grid/grid');
    this.resources.push('grid/k-col');
    return this;
  }

  kendoChart(): KendoConfigBuilder {
    this.resources.push('chart/chart');
    return this;
  }

  kendoTabStrip(): KendoConfigBuilder {
    this.resources.push('tabstrip/tabstrip');
    return this;
  }

}
JeroenVinke commented 8 years ago

sorry, should've mentioned that kendoTemplateSupport() needs to be called from core()

  core(): KendoConfigBuilder {
    this.kendoAutoComplete()
      .kendoButton()
      .kendoTemplateSupport()
      .kendoTabStrip();
    return this;
  }
adriatic commented 8 years ago

Even after this change problem remains

Unhandled promise rejection Error: Invalid template property name: "undefined", valid values are: aggregates, attributes, columns, command, encoded, field, filterable, footerTemplate, format, groupFooterTemplate, groupHeaderTemplate, groupable, headerAttributes, headerTemplate, hidden, lockable, locked, menu, minScreenWidth, sortable, template, title, values, width, editor, widget(…)(anonymous function) @ :9000/jspm_packages/npm/core-js@2.1.0/modules/es6.promise.js:150

That ought to be the consequence of the "core fork":

     Installed Forks

                                            npm:core-js 1.2.6 2.1.0

config.js file states

    "npm:aurelia-binding@1.0.0-beta.1.1.3": {
      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.4",
      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.1.1",
      "core-js": "npm:core-js@2.1.0"
    },

(basically all aurelia-* claim that same dependency - for example

   "npm:aurelia-templating@1.0.0-beta.1.1.1": {
      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.1.3",
      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.1.3",
      "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.1.1",
      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.1",
      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.4",
      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.1.0",
      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.1.1",
      "core-js": "npm:core-js@2.1.0"
    },
    "npm:babel-runtime@5.8.35": {
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:core-js@1.2.6": {
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "systemjs-json": "github:systemjs/plugin-json@0.1.0"
    },
    "npm:core-js@2.1.0": {
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "systemjs-json": "github:systemjs/plugin-json@0.1.0"
    },

Note that the last two are two different definitions of the npm:core-js - so config.js is completely messy

#### Copy the config.js content from the Aurelia-KendoUI bridge?

JeroenVinke commented 8 years ago

kendoTemplateSupport() is not called from core() in the dist folder: https://github.com/aurelia-ui-toolkits/skeleton-plugin-kendo/blob/master/dist/commonjs/config-builder.js#L16

i'd run gulp build again in the plugin and push those changes. Also, you need to add the k- prefix to properties on the k-col:

        <k-grid k-data-source.bind="datasource" k-pageable.bind="pageable" k-sortable.bind="true">
          <k-col k-title="Contact Name" k-field="ContactName">
            <k-template>
              <div class='customer-photo' style="background-image: url(http://demos.telerik.com/kendo-ui/content/web/Customers/${CustomerID}.jpg);"></div>
              <div class='customer-name'>${ContactName}</div>
            </k-template>
          </k-col>
          <k-col k-title="Contact Name" k-field="ContactName"></k-col>
          <k-col k-title="Contact Title" k-field="ContactTitle"></k-col>
          <k-col k-title="Company Name" k-field="CompanyName"></k-col>
          <k-col k-field="Country"></k-col>
        </k-grid>
adriatic commented 8 years ago

What about https://github.com/aurelia-ui-toolkits/skeleton-plugin-kendo/blob/master/dist/commonjs/config-builder.js#L16 ?

This is a proof that something is still broken, right?

Push what changes?

I see - you pointed out that the plugin does not have this code yet

 core(): KendoConfigBuilder {
    this.kendoAutoComplete()
      .kendoButton()
      .kendoTemplateSupport()
      .kendoTabStrip();
    return this;
  }

Not sure why is that as I was pretty sure that I did push that here b13ae09bae8ecbd6ca1fe5c9a17e328df4583c33

JeroenVinke commented 8 years ago

I believe this was completed

adriatic commented 8 years ago

Yes