Erstellen Kendo Grid in Aurelia Typescript

Question

Ich versuche Kendo Grid in Aurelia mit Typoskript zu verwenden, aber ich bekomme immer einen Fehler, wenn ich versuche, es zu initialisieren.

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

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

Der Fehler Ich erhalte ist Unhandled rejection TypeError: $(...).kendoGrid is not a function

Kann mir bitte jemand sagen, was mache ich falsch ??

Edit: Ich habe mit Aurelia-Kendo-Brücke angeschaut, aber aus Leistungsgründen entschied ich mich, es nicht zu verwenden.

Dank

Answer 1

Werfen Sie einen Blick auf die aurelia-kendoui-Brückenprojekt: https://github.com/aurelia-ui-toolkits/aurelia-kendoui-bridge Dies ist ein Beispiel aus dem Komponentenkatalog:

<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> 

Und das Ansichtsmodell:

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

Laut Ihrer ursprünglichen Frage importieren Sie Kendo wahrscheinlich nicht. Legen Sie eine Importanweisung oben in der Viewmodeldatei ab:

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

Answer 2

Wie importieren Sie Kendo? Ich wollte es2015 verwenden und SystemJS später wechselte zum Importieren der JS-Dateien manuell auf meiner Indexseite. Ich importiere nicht alle Widgets, um die Größe zu reduzieren. Natürlich kann es bedeuten, dass die Kendo-Lib im Voraus geladen wird, wenn sie zuerst benötigt wird.