New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mat-tree #3175

Closed
kara opened this Issue Feb 17, 2017 · 93 comments

Comments

Projects
@kara
Contributor

kara commented Feb 17, 2017

No description provided.

@kara kara added this to Prioritized in Next Milestone Feb 17, 2017

@kara kara moved this from Prioritized to In progress in Next Milestone Feb 17, 2017

@RainingNight

This comment has been minimized.

RainingNight commented Mar 20, 2017

Quickly ! ! !

@vyakymenko

This comment has been minimized.

vyakymenko commented Apr 15, 2017

Simple Material Design for tree:

angular io material tree view

Photoshop Source here

I can work on implementation after approve.

@vyakymenko

This comment has been minimized.

vyakymenko commented Apr 15, 2017

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?

@alvachien

This comment has been minimized.

alvachien commented Apr 24, 2017

Looking forward to the release of the Tree!!

@vyakymenko

This comment has been minimized.

vyakymenko commented Apr 24, 2017

Will try to implement this weekend.

@tinayuangao

This comment has been minimized.

Contributor

tinayuangao commented Apr 24, 2017

The tree component's design and implementation are in-progress.

@vyakymenko

This comment has been minimized.

vyakymenko commented Apr 24, 2017

@tinayuangao , thanks for info, will wait for updates.

@RainingNight

This comment has been minimized.

RainingNight commented Apr 25, 2017

Too slowly!

@alvachien

This comment has been minimized.

alvachien commented May 5, 2017

@vyakymenko The status for the tree in README.md still 'Not started'

@vyakymenko

This comment has been minimized.

vyakymenko commented May 5, 2017

@alvachien , because I have not started it per comment from @tinayuangao:
The tree component's design and implementation are in-progress.

@alescdb

This comment has been minimized.

alescdb commented May 9, 2017

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)

image

https://angular2-tree.readme.io/docs

@ajaysattikar

This comment has been minimized.

ajaysattikar commented May 12, 2017

@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.

@alescdb

This comment has been minimized.

alescdb commented May 13, 2017

@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!

@SargoDarya

This comment has been minimized.

Contributor

SargoDarya commented May 19, 2017

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.

@jelbourn jelbourn added the feature label Jun 6, 2017

@gocs

This comment has been minimized.

gocs commented Jun 16, 2017

@alescdb It would be nice to have an indeterminate icon in the root folder if the user selected some items in its child nodes.

@finalxcode

This comment has been minimized.

finalxcode commented Jun 22, 2017

+1 @kara It would be nice to have an indeterminate icon before label

@westfalenxqq

This comment has been minimized.

westfalenxqq commented Jun 28, 2017

urgent need

@majorprojects

This comment has been minimized.

majorprojects commented Jun 30, 2017

Hi,
@vyakymenko what will be the design for grand children ? will it be like we will add children in children object ?

@CaerusKaru

This comment has been minimized.

Member

CaerusKaru commented Jul 6, 2017

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

@unnamed666

This comment has been minimized.

unnamed666 commented Jul 9, 2017

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 :(

@SargoDarya

This comment has been minimized.

Contributor

SargoDarya commented Jul 17, 2017

@CaerusKaru That's looking very neat already, only thing that seems to be missing for the nodes would be an indeterminate state.

@luanmm luanmm referenced this issue Jul 22, 2017

Closed

Tree Component #5964

@mydaypower1

This comment has been minimized.

mydaypower1 commented Aug 7, 2017

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

@princemaple

This comment has been minimized.

Contributor

princemaple commented Mar 6, 2018

Have you run npm i after you updated your package.json?

@George35mk

This comment has been minimized.

George35mk commented Mar 6, 2018

@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

@George35mk

This comment has been minimized.

George35mk commented Mar 6, 2018

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

@saravanansarz

This comment has been minimized.

saravanansarz commented Mar 7, 2018

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 .

@princemaple

This comment has been minimized.

Contributor

princemaple commented Mar 7, 2018

You need @angular/material beta too.

@Tooccooo

This comment has been minimized.

Tooccooo commented Mar 8, 2018

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.

@saravanansarz

This comment has been minimized.

saravanansarz commented Mar 8, 2018

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 .

@sai401

This comment has been minimized.

sai401 commented Mar 20, 2018

I too stopped by same treemodule issue

@chenqun61

This comment has been minimized.

chenqun61 commented Mar 22, 2018

quickly !!!quickly!!!My project need this tree very much!!

@mrlukrative

This comment has been minimized.

mrlukrative commented Mar 24, 2018

My project needs this. Will this still be making the Q1 release?

@CaerusKaru

This comment has been minimized.

Member

CaerusKaru commented Mar 24, 2018

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.

@teterovic

This comment has been minimized.

teterovic commented Apr 11, 2018

  • Virtual scroll or lazy-loading of subtrees
@odahcam

This comment has been minimized.

Contributor

odahcam commented Apr 13, 2018

@teterovic maybe a new issue?

@takamori

This comment has been minimized.

takamori commented Apr 13, 2018

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.

@bandlow

This comment has been minimized.

bandlow commented Apr 17, 2018

I have a problem, to set Checkboxes programatically in the tree-checklist-example. The sectionModel holds only the selected nodes.

@gioragutt

This comment has been minimized.

gioragutt commented Apr 23, 2018

@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.

@jelbourn

This comment has been minimized.

Member

jelbourn commented May 1, 2018

Closing this since it will be in 6.0 any day now.

@jelbourn jelbourn closed this May 1, 2018

@tomdurand75

This comment has been minimized.

tomdurand75 commented May 17, 2018

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 !

@teterovic

This comment has been minimized.

teterovic commented May 17, 2018

@tomdurand75

Please use stackoverflow for this kind of questions

`

getSelected() {
    const selected = this.checklistSelection.selected;
    selected.forEach((node: TreeItemNode) => {
    });
}

`

@ajaysattikar

This comment has been minimized.

ajaysattikar commented May 17, 2018

In case of longer labels, is there any way to display node name on hover (html tooltip/title) in mat-tree?

@gioragutt

This comment has been minimized.

gioragutt commented May 18, 2018

@ajaysattikar if you can provide a header template, than you can do it with matTooltip.

@beany-vu

This comment has been minimized.

beany-vu commented Jun 27, 2018

Is it possible for to make this tree drag&drop item?

@razorsyntax

This comment has been minimized.

razorsyntax commented Aug 1, 2018

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);
@alvaromon

This comment has been minimized.

alvaromon commented Aug 28, 2018

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

@George35mk

This comment has been minimized.

George35mk commented Aug 28, 2018

@alvaromon ask questions like this on StackOverflow, there you gonna get the answer from a question like this.

@alerubis

This comment has been minimized.

alerubis commented Sep 26, 2018

@beany-vu

Is it possible for to make this tree drag&drop item?

While waiting for the official drag and drop, I made an example implementation. You can find it here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment