Создание сетки кендо в Aurelia Typescript

Question

Создание сетки кендо в Aurelia Typescript

0

Я пытаюсь использовать Kendo Grid в aurelia с помощью машинописного текста, но я продолжаю получать ошибку, когда пытаюсь ее инициализировать.

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

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

Ошибка, которую я получаю, - это Unhandled rejection TypeError: $(...).kendoGrid is not a function

Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно?

Edit: Я рассмотрел использование Aurelia-Kendo-bridge, но по соображениям производительности я решил не использовать его.

благодаря

Danny 03 июнь 2016, в 10:04

Источник

0

Я написал блог, который может заинтересовать вас по интеграции сторонних библиотек в Aurelia: davismj.me/blog/aurelia-drag-and-drop
Matthew James Davis 25 июль 2016, в 15:53

Теги:

typescript

aurelia

kendo-grid

2 ответа

Ещё вопросы

Я написал блог, который может заинтересовать вас по интеграции сторонних библиотек в Aurelia: davismj.me/blog/aurelia-drag-and-drop

Gilbert Nwaiwu · Answer 1 · 2016-06-07T12-26-00.000Z

Как вы импортируете кендо? Я хотел использовать es2015, а systemJS bu позже переключился на импорт js файлов вручную на моей индексной странице. Я не импортирую все виджеты жестко, чтобы уменьшить размер. Конечно, делать это по-моему может означать, что kendo lib будет загружен в исходное состояние, когда это необходимо.

Manuel Schweigert · Answer 2 · 2016-06-03T06-24-00.000Z

Взгляните на проект aurelia-kendoui-bridge: https://github.com/aurelia-ui-toolkits/aurelia-kendoui-bridge. Это пример из их каталога компонентов:

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

И ViewModel:

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

Согласно вашему первоначальному вопросу, вы, вероятно, не импортируете Kendo. Поместите оператор импорта вверху вашего файла viewmodel:

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

Спасибо за предложение, Мануэль, я уже посмотрел на это и даже заставил его работать, но из-за проблем с производительностью я не буду сейчас его использовать.