andrew-yangy / ng-treetable Goto Github PK

hi ,
Can i use this ng-treetable if i dont use primeng?

Hi all,

I'm facing the below error after I downloading and running the project from GitHub.
Any suggestions would be great.

<input #gb type="text" pInputText size="50" placeholder="Global Filter">
<ay-treeTable [value]="data" [globalFilter]="gb" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]">

i have try this , in that when i type something in search nothing happen , treelist remain as in initial state , dont know what do to , is their is anything we need to add in this.

I am using version 1.3.3.

How could I change the column size?
because [tableStyle]="{'table-layout': 'auto'}" is not working for me.

Would it be possible to set the size(number of pixels) for specific columns?

Hi ddvkid,
I would like to know if your code can support expanding the tree level(depth) as I want.
for example,

1. Expand the tree for 2 levels at once from selected node.
2. Expand the tree all levels at once.
   If it does support, would you give me some hints? I am really appreciate for your help.

while i am selecting the a row by clicking the checkbox , and after selection when i am going to change the input field column of that row , at the time of clicking of that input field the entire row goes dis selecting, so is their is no combination possible of checkbox selection and input or button features using ng-template directive in angular2+.

In my case while i am searching in records it takes alot of time and memory sometime in case of large records like 2000 it crashes too , can you tell me how to optimize and increase the performance speed.

<input #gb type="text" pInputText size="50" placeholder="Filter">
<ay-treeTable [value]="files" [globalFilter]="gb">
 <ay-column field="name" header="Name"></ay-column>
 <ay-column field="gender" header="Gender"></ay-column> 
</ay-treeTable>

When I enter text in the filter input field and press enter, filter is not working as expected

How do I add buttons on the group rows to have some action?

We have upgraded the angular 9 and treetable 1.2.2 to 1.3.3
It gives following compilation error:

ERROR in The target entry-point "ng-treetable" has missing dependencies:

• @angular/core/src/metadata/lifecycle_hooks

Package.json

    "dependencies": {
        "@angular/animations": "~9.0.3",
        "@angular/common": "~9.0.3",
        "@angular/compiler": "~9.0.3",
        "@angular/core": "~9.0.3",
        "@angular/forms": "~9.0.3",
        "@angular/localize": "^9.0.4",
        "@angular/platform-browser": "~9.0.3",
        "@angular/platform-browser-dynamic": "~9.0.3",
        "@angular/router": "~9.0.3",
        "@ng-bootstrap/ng-bootstrap": "^6.0.0",
        "@ngx-translate/core": "^12.1.2",
        "@ngx-translate/http-loader": "^4.0.0",
        "@swimlane/ngx-charts": "^13.0.2",
        "angular-file-saver": "^1.1.3",
        "bootstrap": "^4.4.1",
        "chart.js": "^2.9.3",
        "font-awesome": "^4.7.0",
        "ng-infinite-scroll": "^1.3.0",
        "ng-treetable": "1.3.3",
        "ng2-auto-complete": "^0.12.0",
        "ng2-charts": "^2.3.0",
        "ngx-infinite-scroll": "^8.0.1",
        "ngx-uploader": "^8.0.0",
        "rxjs": "~6.5.4",
        "tslib": "^1.10.0",
        "zone.js": "~0.10.2"
    },

Resolution will be much appreciated.
Thanks

https://stackblitz.com/edit/angular-pf1sst

Tree table does not work, did everything like in readme

Is it possible to change the column width? or to make the column auto resizable?

Can't bind to 'value' since it isn't a known property of 'ay-treeTable'.

1. If 'ay-treeTable' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ay-treeTable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("<ay-treeTable [ERROR ->][value]="data">
   
   <ay-column field="gender"): PnmtreetableComponent@0:14
   'ay-column' is not a known element:
3. If 'ay-column' is an Angular component, then verify that it is part of this module.
4. If 'ay-column' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<ay-treeTable [value]="data">
   [ERROR ->]
   </a"): PnmtreetableComponent@1:4
   'ay-column' is not a known element:
5. If 'ay-column' is an Angular component, then verify that it is part of this module.
6. If 'ay-column' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<ay-treeTable [value]="data">
   
   [ERROR ->]
   "): PnmtreetableComponent@2:4
   'ay-treeTable' is not a known element:
7. If 'ay-treeTable' is an Angular component, then verify that it is part of this module.
8. If 'ay-treeTable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ay-treeTable [value]="data">
   
   <ay-column"): PnmtreetableComponent@0:0 ; Zone: ; Task: Promise.then ; Value: SyntaxError Error: Template parse errors:
   Can't bind to 'value' since it isn't a known property of 'ay-treeTable'.
9. If 'ay-treeTable' is an Angular component and it has 'value' input, then verify that it is part of this module.
10. If 'ay-treeTable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
    ("<ay-treeTable [ERROR ->][value]="data">
    
    <ay-column field="gender"): PnmtreetableComponent@0:14
    'ay-column' is not a known element:
11. If 'ay-column' is an Angular component, then verify that it is part of this module.
12. If 'ay-column' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<ay-treeTable [value]="data">
    [ERROR ->]
    </a"): PnmtreetableComponent@1:4
    'ay-column' is not a known element:
13. If 'ay-column' is an Angular component, then verify that it is part of this module.
14. If 'ay-column' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("<ay-treeTable [value]="data">
    
    [ERROR ->]
    "): PnmtreetableComponent@2:4
    'ay-treeTable' is not a known element:
15. If 'ay-treeTable' is an Angular component, then verify that it is part of this module.
16. If 'ay-treeTable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ay-treeTable [value]="data">
    
    <ay-column"): PnmtreetableComponent@0:0
    at SyntaxError.ZoneAwareError (http://localhost:3000/node_modules/zone.js/dist/zone.js:992:33)
    at SyntaxError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1592:20)
    at new SyntaxError (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20)
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:11435:23)
    at JitCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27548:72)
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27431:66)
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27431:23)
    at createResult (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27313:23)
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:334:26)
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:126:43)
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:713:57
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:367:31)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:166:47)
    at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:546:35)

hi,

can I filter the treeTable with particular few columns?

all best
anne

Hi ddvkid!!,

I'm looking for tree table structure having drag &drop functionality.

Thanks for considering my request!!

Recently I updated my project from angular 4 to 5. and ng-treetable to 1.3.3

But I'm having trouble with angular 5 with the following error:

My Package.json file:
{ "name": "vdapp", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular-devkit/core": "^0.3.1", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", "angular-tree-component": "^4.1.0", "bootstrap": "^3.3.7", "core-js": "^2.5.3", "ng-treetable": "^1.3.3", "primeng": "^5.0.2", "rxjs": "^5.5.2", "zone.js": "^0.8.20" }, "devDependencies": { "@angular/cli": "^1.5.0", "@angular/compiler-cli": "^5.0.0", "@types/jasmine": "2.5.38", "@types/node": "^6.0.96", "codelyzer": "~2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "^1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.0", "ts-node": "~2.0.0", "tslint": "~4.5.0", "typescript": "~2.4.0" } }

Kindly look into it.

is it works ?

I use treeTable with checkbox, but i want to disable all checkbox of child node.
How can I achieve this?
If do this as official doc says: 'Selection of a particular node can be disabled by setting the selectable property of the node to false.', how to do this in practice, in html or in typescript code?

thank you very much

Recently I tried updating ng-treetable package to 1.3.3.

After updating ng-treetable to 1.3.3.

I tried lunching my application.

But I'm facing the following error:

ERROR in Metadata version mismatch for module C:/Users/Administrator/Desktop/RAVIKUMAR/AVCDProject/VDApp/VDApp/node_modules/ng-treetable/ng-treetable.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/Users/Administrator/Desktop/RAVIKUMAR/AVCDProject/VDApp/VDApp/src/app/app.module.ts, resolving symbol AppModule in C:/Users/Administrator/Desktop/RAVIKUMAR/AVCDProject/VDApp/VDApp/src/app/app.module.ts
webpack: Failed to compile.

Hi,

My colleagues and I have been trying to use this library, but when we create a fresh ng-cli project and add ng-treetable as a dependency, it seems like stylesheets are missing. You can see below the output of a table that I ripped directly from the demo folder of this project.

I'm using ng-treetable v1.2.3 and seeing no errors in google chrome console. However, there are no styles inherited in the project. I suppose this means that ng-treetable directives are being understood, but not styled correctly?

To add ng-treetable to a project, we simply add it to package.json, right? All styling and so forth should just work out-of-the-box, right?

Thanks for putting this component together!

PS, can put my minimum working example/attempt onto github it that would help.

Hi!!

I like a lot this component. I have a dude,
Would I be able to hide a single column?
I have to hide three columns when users colapse a Node. I watch on documentation onNodeCollapse event but I don't know how hide a column.

Thank you in advance!!
Regards!

Elena.

Hi, your source code has really helped me.
And I have still have two questions, would you like to give me hints?
1, does this can add sorting column function?
2, how can I set hyper link to every node? I want to click the row to jump to another page.
3, does it support mouse hover event?

Hi @ddvkid ,

You are doing great job by putting your package in npm as an open source.

I'm using your package but I need extra functionality like drag drop.
Along with the drag and drop , I need "copy functionality when we drag and drop the nodes instead of move".

It would be great if your package has this kind of functionality as well. Not only me, many people also looking for this kind of requirement but unfortunately I didn't find any package that gives treeatble along with drag and drop fucntionality

Thanks in Advance,

Regards,
Ravi Kumar

1. After setting rows, pagination options as sample in the homepage.
   As expend the tree items, there is not any page separation, the bottom line for page display is remained, displaying page no. 1.
2. Even thought window size is set, the page expend continuously over the window size, whenever expend the tree items.

Hi @ddvkid ,
Good day!!
My scenario is:

In the above table, name is not coming completely. how to make the size increaseable or decreasable ?

Thanks in advance!!

Have the good rest of the day!!

Regards,
Ravi Kumar

Hi,

While using lazyloading, is there way to determine which element level is being clicked in order to fetch the next level element data. Also how to fetch the data of the element clicked. During the time data is being fetched, can we show some loading spinner?

Also is there way to control dynamically whether to bind the data lazily or not.

Also have couple of question on Treetable

1. Can we create the column dynamically for Treetable with width, alignment and wrap feature,
2. I want to add sorting to Treetable. Is it currently supported?

Thanks.

Does this support column filter?
thank you

my data is shown in tree list format but its surrounded table is not shown , i try all of this but table look not shown only data is shown . can anybody suggest me the reason of this problem

I am using lazy loading in our project and while i searching some data it is not available because data is in JSON file and it comes in the object while click on expand so in my case i am not clicking the on node to expand and search , i am just searching the data how can i use search filter for that as well .

Do you have an online demo available?