angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.37k stars 6.74k forks source link

mat-tree #3175

Closed kara closed 6 years ago

RainingNight commented 7 years ago

Quickly ! ! !

vyakymenko commented 7 years ago

Simple Material Design for tree:

angular io material tree view

Photoshop Source here

I can work on implementation after approve.

vyakymenko commented 7 years ago

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 commented 7 years ago

Looking forward to the release of the Tree!!

vyakymenko commented 7 years ago

Will try to implement this weekend.

tinayuangao commented 7 years ago

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

vyakymenko commented 7 years ago

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

RainingNight commented 7 years ago

Too slowly!

alvachien commented 7 years ago

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

vyakymenko commented 7 years ago

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

alescdb commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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.

gocs commented 7 years ago

@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 commented 7 years ago

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

westfalenxqq commented 7 years ago

urgent need

majorprojects commented 7 years ago

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

CaerusKaru commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

mydaypower1 commented 7 years ago

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

KelvinOm commented 7 years ago

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!

pinguet62 commented 7 years ago

Hello KelvinOm, You can find the source code into this repository https://github.com/tinayuangao/material2/tree/md-tree-table-2/src/lib/tree

irowbin commented 7 years ago

Any plnkr example? Thanks!

MaguranM commented 7 years ago

Hello, Someone knows when this tree will come?

natalie-o-perret commented 7 years ago

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.

SakiiR commented 7 years ago

A Tree would be great ! for the next release ?

deviloper commented 7 years ago

I think it should implement metadata for tree items (like IDs or unique values) to help querying on databases.

siva636 commented 7 years ago

When this tree component would be added to a beta release?

prabhat112 commented 7 years ago

Any ETA?

dags commented 7 years ago

Any update on this one ?

phamtuananh791994 commented 7 years ago

bump :tada:

CaerusKaru commented 7 years ago

Initial version of the cdk-tree (mat-tree with no Material styling) has gotten its first PR, #7984. Material version should come soon after.

AlphaIX commented 6 years ago

Hi, When will the tree-feature be released

benb7760 commented 6 years ago

@AlphaIX the Readme states by the end of the year

High level stuff planned for Q4 2017 (October - December):

  • cdkTree and matTree
rbleuse commented 6 years ago

This is merged, that'll be available with the next material release

benb7760 commented 6 years ago

@Spanja it's actually not yet merged into master - it's merged into a branch called 'tree' for now

rbleuse commented 6 years ago

@benb7760 Yes my bad, I didn't check the current branch

alvachien commented 6 years ago

Then, when branch 'tree' will be merge into 'master'?

jeremy-sydnor commented 6 years ago

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.

benb7760 commented 6 years ago

@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

capulus-regem commented 6 years ago

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?

Charius commented 6 years ago

Why this issue addressed to closed project?

maher1991 commented 6 years ago

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

odahcam commented 6 years ago

Found some issues in the latest example that I want to register: (I hope that here is the right place)

unnamed666 commented 6 years ago

any news ? :)

FrozenDroid commented 6 years ago

Would really like to get an update on this... Would love to use this feature.

RainingNight commented 6 years ago

any news ? :)

princemaple commented 6 years ago

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.