NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Wayne
Člen
Avatar
Wayne:17.9.2016 8:06

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.9.2016 8:06
Avatar
Petr Štechmüller
Tvůrce
Avatar
Odpovídá na Wayne
Petr Štechmüller:17.9.2016 9:42

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.9.2016 9:43
Nahoru Odpovědět
17.9.2016 9:42
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Wayne
Člen
Avatar
Odpovídá na Petr Štechmüller
Wayne:17.9.2016 10:11

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.9.2016 10:11
Avatar
Petr Štechmüller
Tvůrce
Avatar
Odpovídá na Wayne
Petr Štechmüller:17.9.2016 10:18

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.9.2016 10:18
Nahoru Odpovědět
17.9.2016 10:18
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Wayne
Člen
Avatar
Odpovídá na Petr Štechmüller
Wayne:17.9.2016 10:28

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

 
Nahoru Odpovědět
17.9.2016 10:28
Avatar
Petr Štechmüller
Tvůrce
Avatar
Odpovídá na Wayne
Petr Štechmüller:17.9.2016 10:49

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.9.2016 10:49
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Wayne
Neaktivní uživatel:17.9.2016 11:10

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.9.2016 11:10
Neaktivní uživatelský účet
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.