Aurelia CLI - TypeScript - aurelia-kendoui-bridge Grid Editor Template (Error)

arman-m commented 6 years ago

I have a project with Aurelia CLI, TypeScript and Kendo UI Bridge. Most everything is working fine but recently I needed to place a DropDownList editor template in a Kendo UI Grid. I followed the sample code with almost no modifications but I'm getting an error when I click on any Category cell: app.ts:27 Uncaught TypeError: $(...).appendTo(...).kendoDropDownList is not a function at EditingCustomEditor.categoryDropDownEditor (http://localhost:9000/scripts/app-bundle.js:27:18)

The steps:

Create a new Aurelia app with au new command and choose TypeScript template install kendo ui and kendo ui bridge

npm install --save aurelia-kendoui-bridge
npm install @types/kendo-ui
npm install --save @progress/kendo-ui
npm install jquery --save

Create editing-custom-editor.ts file in src directory Paste the json file content in that file and add the following line at the beginning of the file: export let Products = In app.ts replace the code with the sample code then replace the import statement with this: import {Products} from './editing-custom-editor';

Copy app.html from the sample to your src directory and add the require statements:

<template>
<require from="aurelia-kendoui-bridge/grid/grid"></require>
<require from="aurelia-kendoui-bridge/grid/col"></require>
<require from="aurelia-kendoui-bridge/grid/grid-toolbar"></require>
<require from="aurelia-kendoui-bridge/common/template"></require>
<div id="example">
<ak-grid k-pageable.bind="true" k-height.bind="500" k-toolbar.bind="['create']" 
k-editable.bind="true" k-data-source.bind="dataSource" k-widget.bind="SampleGrid">
  <ak-col k-field="ProductName" k-title="Product Name"></ak-col>
  <ak-col k-field="Category" k-title="Category" k-width="180px" k-editor.bind="categoryDropDownEditor" k-template.bind="categoryTemplate"></ak-col>
  <ak-col k-field="UnitPrice" k-title="Unit Price" k-format="{0:c}" k-width="130px"></ak-col>
  <ak-col k-command="destroy" k-title=" " k-width="150px"></ak-col>
</ak-grid>
</div>
</template>

Modify Aurelia.json in aurelia_project folder to include jquery and aurelia-kendoui-bridge in vendor bundle:

{
"name": "GridEditorTemplate",
"type": "project:application",
"bundler": {
"id": "cli",
"displayName": "Aurelia-CLI"
},
"build": {
"targets": [
  {
    "id": "web",
    "displayName": "Web",
    "index": "index.html",
    "baseDir": ".",
    "output": "scripts"
  }
],
"options": {
  "minify": "stage & prod",
  "sourcemaps": "dev & stage"
},
"bundles": [
  {
    "name": "app-bundle.js",
    "source": [
      "[**/*.js]",
      "**/*.{css,html}"
    ]
  },
  {
    "name": "vendor-bundle.js",
    "prepend": [
      "node_modules/bluebird/js/browser/bluebird.core.js",
      {
        "path": "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird-no-long-stacktraces.js",
        "env": "stage & prod"
      },
      {
        "path": "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js",
        "env": "dev"
      },
      "node_modules/requirejs/require.js"
    ],
    "dependencies": [
      "aurelia-binding",
      "aurelia-bootstrapper",
      "aurelia-dependency-injection",
      "aurelia-event-aggregator",
      "aurelia-framework",
      "aurelia-history",
      "aurelia-history-browser",
      "aurelia-loader",
      "aurelia-loader-default",
      "aurelia-logging",
      "aurelia-logging-console",
      "aurelia-metadata",
      "aurelia-pal",
      "aurelia-pal-browser",
      "aurelia-path",
      "aurelia-polyfills",
      "aurelia-route-recognizer",
      "aurelia-router",
      "aurelia-task-queue",
      "aurelia-templating",
      "aurelia-templating-binding",
      {
        "name": "aurelia-templating-resources",
        "path": "../node_modules/aurelia-templating-resources/dist/amd",
        "main": "aurelia-templating-resources"
      },
      {
        "name": "aurelia-templating-router",
        "path": "../node_modules/aurelia-templating-router/dist/amd",
        "main": "aurelia-templating-router"
      },
      {
        "name": "aurelia-testing",
        "path": "../node_modules/aurelia-testing/dist/amd",
        "main": "aurelia-testing",
        "env": "dev"
      },
      "jquery",
      {
      "name": "kendo",
      "path": "../node_modules/@progress/kendo-ui/",
      "resources": [
        "js/kendo.button.js"
      ]
      },          
      "text"
      ,
      {
        "name": "aurelia-kendoui-bridge",
        "path": "../node_modules/aurelia-kendoui-bridge/dist/amd",
        "main": "index",
        "resources": [
          "common/*.{js,html}",
          "button/*.{js,html}",
          "grid/*.{js,html}",
          "dropdownlist/*.{js,html}",
          "upload/*.{js,html}",
          "numerictextbox/*.{js,html}"
        ]
      }
    ]
  }
],
"loader": {
  "type": "require",
  "configTarget": "vendor-bundle.js",
  "includeBundleMetadataInConfig": "auto",
  "plugins": [
    {
      "name": "text",
      "extensions": [
        ".html",
        ".css"
      ],
      "stub": true
    }
  ]
}
},
"platform": {
"id": "web",
"displayName": "Web",
"index": "index.html",
"baseDir": ".",
"output": "scripts"
},
"transpiler": {
"id": "typescript",
"displayName": "TypeScript",
"fileExtension": ".ts",
"dtsSource": [
  "./custom_typings/**/*.d.ts"
],
"source": "src/**/*.ts"
},
"markupProcessor": {
"id": "minimum",
"displayName": "Minimal Minification",
"fileExtension": ".html",
"source": "src/**/*.html"
},
"cssProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".css",
"source": "src/**/*.css"
},
"editor": {
"id": "vscode",
"displayName": "Visual Studio Code"
},
"unitTestRunner": {
"id": "karma",
"displayName": "Karma",
"source": "test/unit/**/*.ts"
},
"paths": {
"root": "src",
"resources": "resources",
"elements": "resources/elements",
"attributes": "resources/attributes",
"valueConverters": "resources/value-converters",
"bindingBehaviors": "resources/binding-behaviors"
},
"testFramework": {
"id": "jasmine",
"displayName": "Jasmine"
}
}

Create a kendo-sdk folder next to your project src folder and put Kendo UI installation files (as in Telerik walkthroughs).

Replace the index.html with this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="kendo-sdk/styles/kendo.common.min.css">
<link rel="stylesheet" href="kendo-sdk/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="kendo-sdk/styles/kendo.default.min.css">
<link rel="stylesheet" href="kendo-sdk/styles/kendo.mobile.all.min.css">    
<script src="kendo-sdk/js/jquery.min.js"></script>
<script src="kendo-sdk/js/jszip.min.js"></script>
<script src="kendo-sdk/js/kendo.all.min.js"></script>

</head>

<body aurelia-app="main">
<script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>

Here's my package.json file.


{
"name": "grideditortemplate",
"description": "An Aurelia client application.",
"version": "0.1.0",
"repository": {
"type": "???",
"url": "???"
},
"license": "MIT",
"dependencies": {
"@progress/kendo-ui": "^2018.1.117",
"@types/kendo-ui": "^2018.1.0",
"aurelia-animator-css": "^1.0.2",
"aurelia-bootstrapper": "^2.1.1",
"aurelia-kendoui-bridge": "^1.6.5",
"bluebird": "^3.4.1",
"jquery": "^3.3.1",
"requirejs": "^2.3.2",
"text": "github:requirejs/text#latest"
},
"peerDependencies": {},
"devDependencies": {
"aurelia-cli": "^0.32.0",
"aurelia-testing": "^1.0.0-beta.3.0.1",
"aurelia-tools": "^1.0.0",
"gulp": "github:gulpjs/gulp#4.0",
"minimatch": "^3.0.2",
"through2": "^2.0.1",
"uglify-js": "^3.0.19",
"vinyl-fs": "^2.4.3",
"event-stream": "^3.3.3",
"gulp-typescript": "^3.1.4",
"gulp-tslint": "^5.0.0",
"tslint": "^3.11.0",
"typescript": ">=1.9.0-dev || ^2.0.0",
"@types/node": "^6.0.45",
"gulp-htmlmin": "^3.0.0",
"html-minifier": "^3.2.3",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-typescript-preprocessor": "^0.2.1",
"@types/jasmine": "^2.2.0",
"browser-sync": "^2.13.0",
"connect-history-api-fallback": "^1.2.0",
"debounce": "^1.0.2",
"gulp-changed-in-place": "^2.0.3",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sourcemaps": "^2.0.0-alpha",
"gulp-notify": "^2.2.0",
"gulp-watch": "^4.3.11"
}
}

adriatic commented 6 years ago

@arman-m - it's too late here to dive into this now (11:36 PM), so let me start with the question:

Are you aware of this sample, which is relatively new and created with the intent to be used as the sample for this chapter (its a first draft of the document that will be published in the context of the AUCS project

arman-m commented 6 years ago

Hi @adriatic , Thank you for your response. I have the project running (almost finished with the functionality). Everything works fine except this strange issue where I can't seem to find a way to make the Kendo UI Grid display a dropdownlist as an editor with the setup I already have. The problem seems to be in the way packages are included because I put the exact same code in the sample that you suggested and it works. The difference is I followed the instructions and installed kendo with yarn (just ran yarn in the project folder). Another difference is that you include kendo libraries in the typescript modules while I have them included in the index.html. I would still like to understand why my version is not working. The exact same code (I pasted the bundled js content in the Gist sample) works in Gist. The only difference is that the Gist is using system.js instead of aurelia bootstrapper. I'm not sure why would that make any difference but...

adriatic commented 6 years ago

I am not in the position to look at your code to point out the difference between the sample that runs in the gist-run. However, your comment about using Bootstraper instead of system.js makes me worry that you may not have the correct understanding of the Aurelia CLI tooling. System.js is one of the popular module loaders that is not being used in CLI generated code (it’s Require.js that plays the role of the Module loader). Bootstrapped is a component of the Aurelia framework that is always used, regardless of the choice of the Module loader.

The context of the gist could quite different from your own app (it uses the system.js loader), so you cannot mix and match parts of the tooling.

arman-m commented 6 years ago

Thanks @adriatic. I guess if I were the expert I wouldn't be here annoying you with questions. I'm new to node stack and all of this is still blurry to me. I figured it out though. It turned out that jquery was the issue. It was included twice - once in the aurelia.json and the second time via the script tag in index.html. Maybe this information would be useful to someone like me searching for a solution.

adriatic commented 6 years ago

This is a good example of rubber ducking, @arman-m 😄

While you could easily conclude that the answer to your question would be quite difficult to derive ffrom your problem description, I caught on the one thing I could see as wrong. In no way was this meant to indicate my annoyance with you. I am quite impressed that you did find the answer yourself.

aurelia-ui-toolkits / aurelia-kendoui-bridge

Aurelia CLI - TypeScript - aurelia-kendoui-bridge Grid Editor Template (Error) #777