Diskuze: Použití komponenty TreeView z DevExtrem do agularu2

JavaScript JavaScript Použití komponenty TreeView z DevExtrem do agularu2

Avatar
Wayne
Člen
Avatar
Wayne:

Ahoj, z DevExtrem chci použít komponentu TreeView do angularu2. Přes node jsem si devextreme nainstaloval nakonfiguroval a na linkoval ve svém projektu, přesto když pak chci použít funkcionalitu z devExpress hází mi to hlášku "ORIGINAL EXCEPTION: TypeError: $(...).dxTreeView is not a function" Nevěděl by někdo kde může být problém? Níže vkládám tu část kódu týkající se tohoto problému. Předem děkuji

import { Component, Input, OnInit, AfterContentChecked, AfterViewInit} from '@angular/core';
import {TreeData} from './TreeData';
import { DxButton, DxAccordion, DxTreeView } from 'devextreme-angular2';
declare var $: any;

@Component({
    selector: 'tree-view',
    template:
    '<div class="demo-container"><div class="form"><div id="search-treeview"></div><div id="simple-treeview"></div>' +
    '<div id="product-details"><div class="name"> </div><div class="price"></div></div>',
    directives: [DxButton, DxAccordion, DxTreeView]
})

export class TreeView implements OnInit, AfterContentChecked, AfterViewInit {
    @Input()
    products: TreeData[];

    constructor() {
    }

    ngOnInit() {
        var treeview = $("#simple-treeview").dxTreeView({
            items: this.products,
            width: 300,
            searchValue: "",
            onItemClick: function (e: any) {
                var item = e.itemData;
                if (item.price) {
                    $("#product-details > img").css("display", "block");
                    $("#product-details > img").attr("src", item.image);
                    $("#product-details > .price").text("$" + item.price);
                    $("#product-details > .name").text(item.text);
                } else {
                    $("#product-details > img").css("display", "none");
                    $("#product-details > div").text("");
                }
            }
        }).dxTreeView("instance");

        $("#search-treeview").dxTextBox({
            placeholder: "Search",
            width: 300,
            mode: "search",
            valueChangeEvent: "keyup",
            onValueChanged: function (e: any) {
                treeview.option("searchValue", e.value);
            }
        });
    }
}
 
Odpovědět 17. září 8:06
Avatar
Odpovídá na Wayne
Petr Štechmüller:

Ahoj, v prvé řadě bych asi vyzkoušel, zda-li opravdu existuje funkce dxTreeView a je přístupná.
Tedy v prohlížeči si najeď na svojí stránku, otevři vývojářskou konzoli a zadej tam kód, který hází chybu.
Pokud to hodí chybu, tak je jasné, že se ta knihovna nenaimportovala. Pokud to chybu nehodí, tak je problém v importu v angularu.

Edit: Můžeš napsat, jakou verzi angularu 2 používáš? Máš už tu poslední finální?

Editováno 17. září 9:43
Nahoru Odpovědět 17. září 9:42
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Wayne
Člen
Avatar
Odpovídá na Petr Štechmüller
Wayne:

V tuto chvíli u sebe nemám PC se svým projektem, takže to nemohu vyzkoušet a ani zjistit verzi angularu, ale finální verze zatím určitě nemám. Jak řešit problém kdyby se ta knihovna nenaimportovala nebo kdyby byl problém v importu v angular 2?

 
Nahoru Odpovědět 17. září 10:11
Avatar
Odpovídá na Wayne
Petr Štechmüller:

Jestli bude problém v importu v angularu, tak zřejmě nebudeš mít definovano, odkud se má natáhnout ta knihovna. To se nastavuje v externím souboru. Teď záleží, jestli používáš pro definici závislostí SystemJS, nebo novější Webpack.

Editováno 17. září 10:18
Nahoru Odpovědět 17. září 10:18
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Wayne
Člen
Avatar
Odpovídá na Petr Štechmüller
Wayne:

V souboru systemJS jsem to nastavoval, takže tam by snad problém být neměl

 
Nahoru Odpovědět 17. září 10:28
Avatar
Odpovídá na Wayne
Petr Štechmüller:

Tak teď můžeme pouze hádat, co by to mohlo být, když to teď nemůžeš vyzkoušet. Máš jistotu, že ti správně funguje jQuery? To by taky mohlo dělat bordel.

Nahoru Odpovědět 17. září 10:49
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Wayne
Jiří Gracík:

Proč si tak moc komplikuješ život a nepoužiješ komponentu vytvořenou pro Angular2?
https://github.com/…er/README.md

Nahoru Odpovědět 17. září 11:10
Creating websites is awesome till you see the result in another browser ...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.