在Aurelia打字稿中创建Kendo网格

Question

I'm trying to use Kendo Grid in aurelia using typescript, but I keep getting a error when I try to initialize it.

/// <reference path="../../../../vendors/Kendoui/typescript/kendo.all.d.ts" />

export class Test
{
    attached()
    {
        $("#grid").kendoGrid();
    }
}

The error I'm getting is Unhandled rejection TypeError: $(...).kendoGrid is not a function

Can someone please tell me what am I doing wrong??

Edit: I have looked at using Aurelia-Kendo-bridge, but for performance reasons, I chose not to use it.

Thanks

Answer 1

Take a look at the aurelia-kendoui-bridge project: https://github.com/aurelia-ui-toolkits/aurelia-kendoui-bridge This is an example from their component catalog:

<template>
  <ak-grid k-data-source.bind="datasource"
          k-pageable.bind="{ refresh: true, pageSizes: true, buttonCount: 10 }"
          k-sortable.bind="true">
    <!-- Column definitions in HTML -->
    <ak-col k-title="Contact Name" k-field="ContactName">
      <ak-template>
        <!-- Column templates directly in your markup - where they belong! -->
        <div class="customer-photo" style="background-image: url(../content/web/Customers/${CustomerID}.jpg);"></div>
        <!-- Use Aurelia binding features like interpolation, value converters and binding behaviors -->
        <div class="customer-name">${ContactName}</div>
      </ak-template>
    </ak-col>
    <ak-col k-title="Contact Title" k-field="ContactTitle"></ak-col>
    <ak-col k-title="Company Name" k-field="CompanyName"></ak-col>
    <ak-col k-field="Country"></ak-col>
  </ak-grid>
</template>

And the ViewModel:

export class ViewModel {
  datasource = {
    type: 'odata',
    transport: {
      read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'
    },
    pageSize: 5
  };
}

As per your original question, you're probably not importing Kendo. Put an import statement at the top of your viewmodel file:

import './path/to/kendo-ui.js';

Answer 2

How are you importing kendo? I wanted to use es2015 and systemJS bu later switched to importing the js files manually in my index page. I don't import all the widgets tough, to reduce size. Ofcourse doing it my way may mean that the kendo lib will be loaded upfront istead of when its required first.