eu81273 / angular.treeview Goto Github PK

How to filter an element in the tree?

At line 63, the directive calls element.empty().:

62: //Rendering template.
63: element.empty().html( $compile( template )( scope ) );

This function isn't supplied as part of jqLite. This means that jquery needs to be included in order to use the directive.

Proposed fixes:

1. Use another technique to clear the DOM children before re-compiling, or
2. Update the documentation to explicitly state the dependency.

I am implementing a tree structure that the user can select more the one node using the Ctrl button.

Is this possible in this directive? Or is there a way I can implement it

I'm a total newb to Angular... any one have an example of how you would say have a button that when you click it you can add say a new child node to the currently selected node?

I setup the tree using the example given. A simple tree structure:
$scope.folderTreeList = [{ name: "folder_1", label: "Folder 1", collapsed: true, child: [{ name: "file_1", label: "Superman.txt" }] }, { name: "folder_2", label: "Folder 2" }];

The tree able to render correctly. But when I clicked on the folder icon, it won't expand. No error thrown in my firebug. Is a simple setup. But not working. The demo in jsfiddle working fine.

I've tried to insert the treeview in a partial which I include using ng-include. When a node gets selected
$scope.$watch('tree.currentNode', function() { //...}); does not fire. Neither does
$scope.$parent.$watch('tree.currentNode', function() { //...}); work.
I'd suggest to send an event for this.

I had requirement of making a root node tobe made selected by default. I was unable to get the root node from the treeview. Can anybody please help me out.

Nice directive. But for my project I need to have check boxes in the tree structure because of this I am unable to use this. Could you please let us know by when you are planning to release check boxes feature to your module?

Does anyone know how to make a horizontal scroll work when the tree gets deep or the node names are long? It works vertically.
Is it because the use of padding perhaps?

Here is a modified fiddle: http://jsfiddle.net/mrdavidsson/Lynpnddz/12/

Is any way to start with all folders collapsed from the start?

Thanks!

In my project, the node images are vary depend on the node value. If the child element has pdf files then the main node folder icon should be a pdf. Now I can change it via css but how do i make dynamic ?

Hello,
Is there a provision that angular.treeview supports editing in place ?

Currently i am using this directive , but also need to edit data present in it. Is it possible , if so please let me know.

Thanks.

Is it possible to move the template string used in the directive for the treeview to an external html file?
I'm trying to do this myself but running into some trouble. So far I've moved the attrs variables to scope and my html looks like this:

<ul>
    <li data-ng-repeat="node in treeModel">
        <i class="collapsed"
            data-ng-show="node.nodeChildren.length && node.collapsed"
            data-ng-click="selectNodeHead(node)">
        </i>
        <i class="expanded"
            data-ng-show="node.nodeChildren.length && !node.collapsed"
            data-ng-click="selectNodeHead(node)">
        </i>
        <i class="normal"
            data-ng-hide="node.nodeChildren.length">
        </i>
        <span class="treenode node.nodeType"
            id="node.nodeId"
            data-ng-class="node.selected"
            data-ng-click="selectNodeLabel(node)">
            {{node.nodeLabel}}
        </span>
        <div data-ng-hide="!node.collapsed"
            data-tree-model="node.nodeChildren"
            data-node-id="nodeId"
            data-node-label="nodeLabel"
            data-node-children="nodeChildren"
        </div>
    </li>
</ul>

I had to take the treeId out, and the treeModel is being treated as string, I'm not sure why. Any help or comments would be appreciated.

I am using anjular treeview. I kept this controll inside the div and i set both scroll bar to navigate the tree view node from top to bottom.

Requirement is that Select/Focus the tree view node when ng grid cell is clicked based on validation. As per the requirement corresponding Tree view node is selected once grid cell is clicked.

Problem is that if selected tree view node is not in visible area, user have to manually scroll the div where Tree view have been kept to view Selected/Focused tree view node.

I want to programmatically scroll the tree view to view the focused node.

I met a problem when using angular treeview, if there are child nodes, the node will show as a folder, this is right. But if node is a directory, but there is no files in this folder, when I use this control, it treats the empty folder as a file. I think this is weird.

I also tried angular tree control, is has a place to set "What is leaf", but in treeview I didn't find the place to set my own way to judge what is a trache and what is a leaf node.

When i click on the file in treeview then i want that some other html page should open. So i want to add link to each file(childnode) in json itself and the use it in html page?

Hi All,

I am looking for extension for this solution. I want searchable tree view should only appear while searching in text box and should not take space on page . I used following solution.

http://jsfiddle.net/j1wmqerp/

Thank You,

Vishal Bedre

When I pull the data from the DB, I get a flat array:

[... : {parent : , children: [, ... ] ...]

Not a recursive structure. This also works great for pagination, filtering and lazy loading.

Generally I'm highly confused by the choice to represent data as a json deeply nested structure.

Is there any way to alleviate this?

It would be great to have the ability to easily sort the data, and child data in different ways.

Hello there,

How do I capture a right click event? I want to popup a menu on node right clicking, how do I do that? any suggestions?

thank you.

Hey, maintainer(s) of eu81273/angular.treeview!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library eu81273/angular.treeview is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "eu81273/angular.treeview",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

hi,
this is really cook and i am using it, thank you :)

but may i suggest some features

• ability to drag and drop
• lazy load children for performance
• check box integration
  -animation

thanks in advanced.

Hi,
Can someone tell me, what is the nicer way to collapse the tree (each node) on button click?

For now I'm using something like:

$scope.collapseTree = function(){
    $scope.nodeList.forEach(function (node){
         node.expanded = false;
    });
};

But I am not sure if this is the best option.
Thanks,
Kamila

Hi,

I would like to highlight a selected a node.

Though i am able to select it, but i am not able to highlight the selected node.

Below is the link for the fiddle.
http://jsfiddle.net/btrz76s2/

Can someone please provide inputs on how to highlight a node?

Thanks

The example on the fiddle is missing the tree id attribute. Also, it seems that it's using an older version of the module. Upgrading it would be awesome.

can we select any partcular node by programmatically and open the tree upto selected node

Is it possible to click a button to select a specific (in front of the well-known by ID) branch of the tree?

Hi, I'm trying to use watch in controller to know what node is selected, but it is not working, is there any example?

Thanks

Hello,

I would like to ask how can I make span (text) to expand/collapse as the icon on click.

The same behavior on-click like icon to collapse or expand if it is a folder

Many thanks

How to change the icon of the child nodes using angular.treeview?

Hi,

Your tree view is simple and clean.
Is there any way i can add nodes based on a AJAX/Get call for each node?

Kind Regards
Kay

Does it allow all the folders folded by default?
or is there a function to fold all?

How to do multiselect in angular.treeview?

I want to get the parent item and the sibling items,how to do it?

How can i use a controller to select a Node (instead of clicking to select)?

I tried to set currentNode and hoped that it will trigger $scope.$watch,
but it does not.

Hi there,
How do I expand tree nodes while clicking on the text instead of folder icon.

@eu81273

I want add some custom buttons in node. For example, i want add delete button on selected node. So, i need custom templating or patch your js with something like

...
'<i class="glyphicon glyphicon-remove" data-ng-show="node.selected" data-ng-click="removeItem(node)"></i>' 
...

Is it possible to add ability to inject template?

hi,
I have an issue where I use Angular tabs and I need to add your tree.view (both using li/ul....)
this is the outcome (see image).

Could it be added to the bower registry so we could install via bower?

Hi
I have a requirement where I want to maintain the state of the tree. I mean I want to save/check which nodes are expanded by the user. After expanding the nodes of the tree, user can move to other pages of the application. When user comes back to the tree page, the tree should be expanded by default to the last saved state. How can we achieve this here? If anyone of you have any idea, please guide me. Thanks a lot for reading this and giving your time.

Hi, I want to show breadcrumbs when node is selected,but can't get complete hierarchy from selected node
for eg: if i select node subuser2-1-1 then i want
User->subUser2->subuser2-1->subuser2-1-1

Any suggestions??

Can we do Drag Drop in this Treeview?

Hello,
There is an easy to way to remove a node from the tree?
Thank you.