TreeTable UI does not seem to showing

UI Components for Angular
Post Reply
jallmitch
Posts: 3
Joined: 19 Jul 2017, 22:09

19 Jul 2017, 22:47

I have followed everything according to https://www.primefaces.org/primeng/#/treetable, but I am not getting the UI that is suppose to be going along with it. All of the data is coming through, meaning that I get the two column headers and the data, however it is only plain text. I have added my code below. I'm not exactly sure why it is not showing, any pointers would be appreciated. Thank you.

I am using Angular 4 and have primeng 4.1.0 installed

sceanrios.json

Code: Select all

{
    "data":
    [  
        {  
            "data":{  
                "name":"MGT 346 EOC Ops and Planning Exercises",
                "version":""
            },
            "children":[
                {  
                    "data":{  
                        "name":"EOC El Diablo Bowl Gold Activity August 2015",
                        "version":"1.7.5"
                    }
                },
                {  
                    "data":{  
                        "name":"EOC Granger County Fair 213rr - Full Add Gold FEBRUARY 2016",
                        "version":"1.7.5"
                    }
                },
                {  
                    "data":{  
                        "name":"EOC Granger County Fair 213rr - Full Add Gold June 2016",
                        "version":"1.7.6"
                    }
                },
                {  
                    "data":{  
                        "name":"EOC Granger County Fair 213rr - 12 computer Gold-August 2015",
                        "version":"1.7.5"
                    }
                }
            ]
        },
        {  
            "data":{  
                "name":"Hurricane Kitty v12_SWB Edits",
                "version":"1.7.7"
            }
        },
        {  
            "data":{  
                "name":"Hurricane Kitty v12_SWB Edits_V1",
                "version":"1.7.7"
            }
        }
    ]
}
nodeservice.service.ts

Code: Select all

import { Injectable } from '@angular/core';
import { Http, Response} from '@angular/http';
import { TreeNode } from "primeng/primeng";
import 'rxjs/add/operator/toPromise';

@Injectable()
export class NodeService{

    constructor(private http: Http){}

    getFiles(){
        return this.http.get('/assets/json/scenarios.json')
                   .toPromise()
                   .then(res => <TreeNode[]> res.json().data);
    }
}
manager.component.ts

Code: Select all

import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/primeng';
import { NodeService } from '../services/nodeservice.service';

@Component({
  selector: 'app-manager',
  templateUrl: './manager.component.html',
  styles: [require('./manager.component.css'),
           require('bootstrap/dist/css/bootstrap.min.css')]
})
export class ManagerComponent implements OnInit {
  emesBanner: string;
  files: TreeNode[];
    
  constructor(private nodeService: NodeService) { }
  
   cols;
  ngOnInit() {
    this.emesBanner = '/assets/images/emes_banner.png';
    this.nodeService.getFiles().then(files => this.files = files);
    this.cols = [
      {field:'name', header:'Name'},
      {field:'version', header:'Version'}
    ];
  }
}
manager.component.html

Code: Select all

<p-treeTable [value]="files" selectionMode="single" [style]="{'margin-top':'25px'}">
  <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-treeTable>
app.module.ts

Code: Select all

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { TreeTableModule, SharedModule } from 'primeng/primeng';

import { AppComponent } from './app.component';
import { ManagerComponent } from './manager/manager.component';
import { NodeService } from './services/nodeservice.service';

@NgModule({
  declarations: [
    AppComponent,
    ManagerComponent
  ],
  imports: [
    BrowserModule,
    TreeTableModule,
    HttpModule, 
    SharedModule
  ],
  providers: [NodeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

jallmitch
Posts: 3
Joined: 19 Jul 2017, 22:09

20 Jul 2017, 23:35

After stumbling and attempting to figure things out, I found out that webpack was were the problem was. I removed the all the required(styles) from the components and imported all of the styles in the src/styles.css file. Up and running.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests