mat-tree
kara opened this issue · 94 comments
Quickly ! ! !
Proposing code design:
JSON Example:
{
"data": [{
"label": "Tree Item Collapsed",
"data": "Tree Item Collapsed Data",
"expandIcon": "fa-folder-open",
"collapseIcon": "fa-folder",
"children": []
}, {
"label": "Tree Item Expanded",
"data": "Tree Item Expanded Data",
"expandIcon": "fa-folder-open",
"collapseIcon": "fa-folder",
"children": [{
"label": "Bookmarks",
"data": "Bookmarks Data",
"icon": "fa-bookmarks"
}, {
"label": "Chart",
"data": "Chart Data",
"expandedIcon": "fa-chart"
}]
}, {
"label": "Bookmarks",
"data": "Bookmarks Data",
"icon": "fa-bookmarks"
}, {
"label": "Chart",
"data": "Chart Data",
"expandedIcon": "fa-chart"
}]
}Attributes:
data - Data array of treenodes
selectionType - Selection type, "single", "multiple", maybe "checkbox?".
selection - Single treenode instance or an array to refer to the selections.
orientation - Tree orientation.
Events:
nodeExpand - Callback to invoke when a node is expanded.
nodeCollapse - Callback to invoke when a node is expanded.
nodeSelect - Callback to invoke when a node is unselected.
nodeUnselect - Callback to invoke when a node is selected.
Lazy Loading?
Drag-n-Drop?
Looking forward to the release of the Tree!!
Will try to implement this weekend.
The tree component's design and implementation are in-progress.
@tinayuangao , thanks for info, will wait for updates.
Too slowly!
@vyakymenko The status for the tree in README.md still 'Not started'
@alvachien , because I have not started it per comment from @tinayuangao:
The tree component's design and implementation are in-progress.
While a official <md-tree> is developed, I find out "angular-tree-component".
It supports templates & themes (eg putting <md-icon> and/or <md-checkbox> into it)
@alescdb angular2-tree-component works fine for me, however I wasn't able to find any custom icons (e.g. file or folder icon before labels) inclusion in documentation. Do you have any such example? Appreciate help.
@ajaysattikar; using a custom template (https://angular2-tree.readme.io/docs/templates) should do the trick, something that looks like that :
<tree-root [nodes]="nodes">
<ng-template #treeNodeTemplate let-node let-index="index">
<md-icon>{{ node.data.icon }}</md-icon>
{{ node.data.name }}
</ng-template>
</tree-root>
nodes should look like :
nodes = [
{
id: 1,
name: 'My Folder',
icon: 'folder'
children: [
{ id: 2, name: 'My File 1', icon: 'insert_drive_file' },
{ id: 3, name: 'My File 2', icon: 'insert_drive_file' }
]
},
{
id: 4,
name: 'Other Folder',
icon: 'folder'
}
];
I hope this help!
I have to say that I'm against using the generic data term. Everything is data and there is always a better description. Call it children or nodes or whatever. I like @alescdb structuring. It's clear and has no bloat.
EDIT: I think it would be nice if instead of icon we could put a component in there like a checkbox or radio button.
@alescdb It would be nice to have an indeterminate icon in the root folder if the user selected some items in its child nodes.
+1 @kara It would be nice to have an indeterminate icon before label
urgent need
Hi,
@vyakymenko what will be the design for grand children ? will it be like we will add children in children object ?
For those following this thread, the sneak-peek implementation that the Material team has in mind can be found here.
The source code is not available, but it looks like it draws on new cdk-tree and cdk-node elements. The best comparison would be to say that it looks like a pretty-printer for JSON objects (with select option), using Material, and very similar to the angular2-tree linked above by @alescdb
looks realy nice, would be great to implement good drag'n'drop for nodes - that what is lacking most in other tree implementations i tried.
angular2-tree for me is best i tried - but developers stopped supporting systemjs :(
@CaerusKaru That's looking very neat already, only thing that seems to be missing for the nodes would be an indeterminate state.
The MD tree is an exceting component and very expect it to release, Many thanks for all of you contribution. Could you please let us know when could this feature release if possible, Even if it's a trial function.
Thanks and Best regards...
Albert
Hi to all! Can u share source code of current version of tree component? My team already need this component and we want to use what u done. Please share it.
Thanks and Best regards!
Hello KelvinOm,
You can find the source code into this repository
https://github.com/tinayuangao/material2/tree/md-tree-table-2/src/lib/tree
Any plnkr example? Thanks!
Hello,
Someone knows when this tree will come?
Hm just out of curiosity why it has not been decided to add hierarchy support to the table?
Would have added grid support to the tree feature.
A Tree would be great ! for the next release ?
I think it should implement metadata for tree items (like IDs or unique values) to help querying on databases.
When this tree component would be added to a beta release?
Any ETA?
Any update on this one ?
bump 🎉
Initial version of the cdk-tree (mat-tree with no Material styling) has gotten its first PR, #7984. Material version should come soon after.
Hi, When will the tree-feature be released
This is merged, that'll be available with the next material release
@spanja it's actually not yet merged into master - it's merged into a branch called 'tree' for now
Then, when branch 'tree' will be merge into 'master'?
Is there a way when expanding it to only have it expand the next level and only the next level rather than the entire tree? Looking at the sneak peek, when you expand the top level option, it expands every branch and sub branch.
@nofear217 this is no longer the case - the sneak peek is outdated. You can now expand individual nodes or descendent nodes separately. latest working branch
Will the mat-tree be released this quarter as originally planned? If not, then will the release get pushed into early next month at the latest?
Why this issue addressed to closed project?
Can anyone tell me how the dotted border lines between the nodes are generated in the tree of this page: https://tina-material-tree.firebaseapp.com/simple-tree
Found some issues in the latest example that I want to register: (I hope that here is the right place)
-
In RTL, dotted borders are going from top to right, should be top to left.
-
In RTL, arrows are pointing down when open and right when closed, should point to left when closed.
-
Dotted borders seems unaligned.
-
There's no indeterminate state (partial children selection) indication:
any news ? :)
Would really like to get an update on this... Would love to use this feature.
any news ? :)
For those who don't know already, there is this branch with 17 commits ahead https://github.com/angular/material2/tree/tree and there are another two open PRs that are tree-related https://github.com/angular/material2/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Aopen+tree
I don't know when they are going to merge the branch into master, but there definitely are things going on about tree. Let's hope that happens soon!
EDIT: If you want to follow along, do a search every now and then, subscribe to the open PRs. It's nicer than repeatedly asking for updates here.
Can anyone tell me how can i npm install the tree branch and use it , i really need it right now .
So there's good news and bad news.
👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.
😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request.
Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this State. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.
So we need to get in touch with these people to ask them to CLA it.
Does this tree support the virtual scroll when it comes to huge number of nodes? And if so how can we add this feature ?
@michaelbuller can you reffer that PR? Is it the #9796?
Hi, I just start building an application where I need the treeView this component is gonna be the main component of the app I build, any news about this when is gonna be released?
Thanks.
@George35mk it's in the latest beta already.
@princemaple Oh, I see that changelog states that about 6.0.0-beta.3. But for some reason there is no Github release for 6.0.0-beta.3, the latest is 6.0.0-beta.2
I tried it here https://stackblitz.com/edit/ng-mat-tree-test?file=app/app.component.html it's pretty cool. The styling might need some more work / docs, though.
@princemaple Thank you Bro
@princemaple can you tell me what npm command to use to update my current angular material 2 version to the 6.0.0-beta.5
Thank you
Now my NPM looks like this
"dependencies": {
"@angular/animations": "^5.2.4",
"@angular/cdk": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/flex-layout": "^2.0.0-beta.12",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.0",
"@angular/material-moment-adapter": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@types/three": "^0.89.6",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"moment": "^2.20.1",
"ng2-truncate": "^1.3.11",
"orbit-controls-es6": "^1.0.10",
"rxjs": "^5.5.6",
"stats.js": "^0.17.0",
"three": "^0.89.0",
"three-orbit-controls": "^82.1.0",
"zone.js": "^0.8.19"
},
@George35mk It's a json file, you can edit it with an editor.
Ok thanks I rename all 5.2.0 to the latest beta version , works
Bad news, I have error.
ERROR in src/app/UserInterface/Browser/browser/browser.component.ts(2,65): error TS2307: Cannot find module '@angular/cdk/tree'. src/app/material.module.ts(47,29): error TS2307: Cannot find module '@angular/cdk/tree'.
package.json
{
"name": "angular-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0-beta.5",
"@angular/cdk": "^6.0.0-beta.3",
"@angular/common": "^6.0.0-beta.5",
"@angular/compiler": "^6.0.0-beta.5",
"@angular/core": "^6.0.0-beta.5",
"@angular/flex-layout": "^2.0.0-beta.12",
"@angular/forms": "^6.0.0-beta.5",
"@angular/http": "^6.0.0-beta.5",
"@angular/material": "^6.0.0-beta.3",
"@angular/material-moment-adapter": "^6.0.0-beta.5",
"@angular/platform-browser": "^6.0.0-beta.5",
"@angular/platform-browser-dynamic": "^6.0.0-beta.5",
"@angular/router": "^6.0.0-beta.5",
"@types/three": "^0.89.6",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"moment": "^2.20.1",
"ng2-truncate": "^1.3.11",
"orbit-controls-es6": "^1.0.10",
"rxjs": "^5.5.6",
"stats.js": "^0.17.0",
"three": "^0.89.0",
"three-orbit-controls": "^82.1.0",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "1.7.2",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
material.module.ts
import { NgModule } from '@angular/core';
import {
MatButtonModule,
MatButtonToggleModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatProgressBarModule,
MatTooltipModule,
MatPaginatorModule,
MatSelectModule,
MatChipsModule,
MatGridListModule,
MatCheckboxModule,
MatTabsModule,
MatExpansionModule,
MatSlideToggleModule,
MatAutocompleteModule,
MatStepperModule,
MatSnackBarModule,
MatDialogModule,
MatInputModule,
MatFormFieldModule,
MatListModule,
MatRadioModule,
MatRippleModule,
MatProgressSpinnerModule,
MatSliderModule,
MatTableModule,
MatSortModule,
MatDatepickerModule,
MatNativeDateModule
} from '@angular/material';
import {A11yModule} from '@angular/cdk/a11y';
import {BidiModule} from '@angular/cdk/bidi';
import {ObserversModule} from '@angular/cdk/observers';
import {OverlayModule} from '@angular/cdk/overlay';
import {PlatformModule} from '@angular/cdk/platform';
import {PortalModule} from '@angular/cdk/portal';
import {ScrollDispatchModule} from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
@NgModule({
imports: [
MatButtonModule,
MatButtonToggleModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatProgressBarModule,
MatTooltipModule,
MatPaginatorModule,
MatSelectModule,
MatChipsModule,
MatGridListModule,
MatCheckboxModule,
MatTabsModule,
MatExpansionModule,
MatSlideToggleModule,
MatAutocompleteModule,
MatStepperModule,
MatSnackBarModule,
MatDialogModule,
MatInputModule,
MatFormFieldModule,
MatListModule,
MatRadioModule,
MatRippleModule,
MatProgressSpinnerModule,
MatSliderModule,
MatTableModule,
MatSortModule,
MatDatepickerModule,
MatNativeDateModule
],
exports: [
// CDK
A11yModule,
BidiModule,
ObserversModule,
OverlayModule,
PlatformModule,
PortalModule,
ScrollDispatchModule,
CdkStepperModule,
CdkTableModule,
CdkTreeModule,
MatButtonModule,
MatButtonToggleModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
MatSidenavModule,
MatProgressBarModule,
MatTooltipModule,
MatPaginatorModule,
MatSelectModule,
MatChipsModule,
MatGridListModule,
MatCheckboxModule,
MatTabsModule,
MatExpansionModule,
MatSlideToggleModule,
MatAutocompleteModule,
MatStepperModule,
MatSnackBarModule,
MatDialogModule,
MatInputModule,
MatFormFieldModule,
MatListModule,
MatRadioModule,
MatRippleModule,
MatProgressSpinnerModule,
MatSliderModule,
MatTableModule,
MatSortModule,
MatDatepickerModule,
MatNativeDateModule
]
})
export class MaterialModule {}
you have to add angular cdk package to your package json
@JanEggers I think I have it look
"dependencies": {
"@angular/animations": "^6.0.0-beta.5",
"@angular/cdk": "^6.0.0-beta.3", <============= here
"@angular/common": "^6.0.0-beta.5",
"@angular/compiler": "^6.0.0-beta.5",
"@angular/core": "^6.0.0-beta.5",
"@angular/flex-layout": "^2.0.0-beta.12",
"@angular/forms": "^6.0.0-beta.5",
"@angular/http": "^6.0.0-beta.5",
"@angular/material": "^6.0.0-beta.3",
"@angular/material-moment-adapter": "^6.0.0-beta.5",
"@angular/platform-browser": "^6.0.0-beta.5",
"@angular/platform-browser-dynamic": "^6.0.0-beta.5",
"@angular/router": "^6.0.0-beta.5",
"@types/three": "^0.89.6",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"moment": "^2.20.1",
"ng2-truncate": "^1.3.11",
"orbit-controls-es6": "^1.0.10",
"rxjs": "^5.5.6",
"stats.js": "^0.17.0",
"three": "^0.89.0",
"three-orbit-controls": "^82.1.0",
"zone.js": "^0.8.19"
},
Have you run npm i after you updated your package.json?
@princemaple Yes I have also deleted all node_modules folder and I reinstalled with npm install and is not work @angular/cdk/tree don't exist
This seems to work if I install the latest cdk npm install @angular/cdk@6.0.0-beta.4 --save
but again is not working I have some errors with this versions, is not stable.
I gonna wait for the official release
After adding cdk 6 beta version still there is error @angular/material/tree is not found .
Note : I use material 5.2.4 version cleaned up node modules as well .
You need @angular/material beta too.
For 6.0.0-beta.4, update cdk and material in terminal instead of package.json:
npm install @angular/material@6.0.0-beta.4 @angular/cdk@6.0.0-beta.4
Updating the version in package.json seems can't get the newest tree package.
After trying this something strange happening if i install CDK beta version material gets disappeared if i install material beta version CDK gets disappeared what is the solution for this .
I too stopped by same treemodule issue
quickly !!!quickly!!!My project need this tree very much!!
My project needs this. Will this still be making the Q1 release?
This is part of the 6.0 beta as noted above. It will be in the 6.0 release which is targeted to coincide with the Angular core 6.0 release at some point in April.
- Virtual scroll or lazy-loading of subtrees
@teterovic maybe a new issue?
Lazy-loading is possible already; @tinayuangao 's https://stackblitz.com/edit/material-tree-dynamic from a recent presentation is a good example of how to do lazy loading with a custom data source (better than the loadmore example, imo, tho that stackblitz does have a few bugs that you can find if you play w/ it enough). My understanding is that virtual scroll is covered by #10122 and thus being worked on separately.
This tree seems to work nicely, from my experience playing w/ it so far, tho having more examples could serve as a helpful guide.
I have a problem, to set Checkboxes programatically in the tree-checklist-example. The sectionModel holds only the selected nodes.
@takamori regarding the stackblitz example, here's a fork of mine that fixes a bug where when you click the toggle button when it's already loading (after being clicked), it will add the child twice. Fixed by adding [disabled]="node.isLoading" on the toggle button.
Closing this since it will be in 6.0 any day now.
I used the tree component with checkbox option. Somebody know how I can get the nodes selected ?
I used this example : https://stackblitz.com/angular/nkmjydodvnp?file=app%2Ftree-checklist-example.ts
I tried to used the method isSelected(node) but it is not relevant.
Thanks !
Please use stackoverflow for this kind of questions
`
getSelected() {
const selected = this.checklistSelection.selected;
selected.forEach((node: TreeItemNode) => {
});
}
`
In case of longer labels, is there any way to display node name on hover (html tooltip/title) in mat-tree?
@ajaysattikar if you can provide a header template, than you can do it with matTooltip.
Is it possible for to make this tree drag&drop item?
Is it possible to use this without
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
as per the examples at the tree docs. The stackblitz example I'm trying to get running without the material dependency is here.
I'm trying to replace these lines:
treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,
this._isExpandable, this._getChildren);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
how do i get a serialized C# Dictionary as json in the format required for the 'tree with dynamic data' example?
the example shows this format:
dataMap = new Map<string, string[]>([ ['Fruits', ['Apple', 'Orange', 'Banana']], ['Vegetables', ['Tomato', 'Potato', 'Onion']], ['Apple', ['Fuji', 'Macintosh']], ['Onion', ['Yellow', 'White', 'Purple']] ]);
i would need my json data from a serialized C# Dictionary to be in format above
@alvaromon ask questions like this on StackOverflow, there you gonna get the answer from a question like this.
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.