fer / ion-tree-list Goto Github PK

Hi,

I am using your directive with ion-autocomplete. Basically I changed ion-autocomplete template by applying your ion-tree-list in it. The problem is that I also want to override your default template by applying this in code:
<ion-tree-list items="items" template-url="'common/tree_list_template.html'"></ion-tree-list>

Application just freeze after searching binding your tree control. Also one question, why don't you populate your template url like this:

this.templateUrl = valueOrDefault($attrs.templateUrl, undefined);

Regards,
Alan

When you click on the items first time having further children tree.Then all the trees inside these items automatically collapse,But it is working fine after that.I take a look at your code and to do some modification but couldn't able to solve this issue.Would you please help me on it?

Support 'can-swipe' attribute like "Ion-List", for each "Item" of the Ion-Tree-List, so that it is possible to add "Edits Buttons" inside the list.

Example of 'can-swipe' in action, to show Edit and Share buttons
http://codepen.io/ionic/pen/JsHjf

Hello @fer , I am the member of cdnjs project. We want to host this library. There is a question want to ask about naming scheme. I found that the file ion-tree-list.js is source file, but the css file ion-tree-list.css is minified file. They are different naming scheme. Would you like to change the naming scheme? For example, change the minified css file ion-tree-list.css to ion-tree-list.min.css. Thanks for your help!

cdnjs/cdnjs#9340

How to modify the style of a node? For example, add images before each node.

Hello,

I have implemented the ion-tree-list in a web-app (ionic tabs app).
The source for the tree is defined in services.js like that:

.factory('VerificationTree', function () {
    var verificationTree = [
        {
            id: 'operator',
            name: 'Operator'
        },
        {
            id: 'type_of_test',
            name: 'Type of test',
        },
        {
            id: 'system',
            name: 'System'
        },
        {
            id: 'component',
            name: 'Component'
        },
        {
            id: 'component_group',
            name: 'Component group',
            tree: [
                {
                    id: 'component2',
                    name: 'Component'
                }
            ]
        }
    ];

    return {
        all: function () {
            return verificationTree;
        }
    };
})

In controller.js i try to open another page when i click on a tree-list-item:

.controller('VerificationCtrl', function ($scope, VerificationTree) {
    $scope.verificationTree = VerificationTree.all();
    $scope.$on('$ionTreeList:ItemClicked', function (event, item) {
        if (item.id == 'type_of_test') {
            window.open('templates/type-of-test.html');
        };
        //if (item.id == 'component2') {
        //    alert('The ion-tree-list item component2 was clicked');
        //};
    })
})

When i click per example on the item with the id "type_of_test", the page type-of-test is opened in another browser tab, but the layout looks strange.
The normal ionic tabs layout is lost.
Can i combine the tree with a navigation view like that and how?

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('type-of-test ', {
    url: '/type-of-test ',
    templateUrl: 'type-of-test .html'
  });
});

Thank you.

Hello,

We tried to populate the ion-tree-list with data from our database but had no luck.
Can You give us please an example, if You have one?

Thanks in advance!
Patrick

Hi ,
It looks really awesome.

BUT , Is there any fixes you did in order to improve the performance while rendering the tree list.
I'm having a scenario and want to render the STATES and underneath each state have COUNTIES tree.
Have 50 states and counties tree item max 70-80 underneath each state to be render.

It works fine, but the page responding very slow. Almost die while rendering 👎
I observed on browser chrome , it give me below message on console while rendering tab where i used tree -list
" [Violation] Added non-passive event listener to a scroll-blocking " ...........ionic.bundle.min.js

any help ?

The "installation" section of the readme states that the directive can be used like this:

<ion-tree-list items="tasks" collapsed="true"></ion-tree-list>

But this results in a blank tree without any JS errors. There seems to be a structure but the items don't get rendered. After some debugging and trial-and-error I found that this works:

<ion-tree-list items="tasks" collapsed="true" template-url="item_default_renderer"></ion-tree-list>

This might be intended behavior, but if so it would be a good idea to update the readme.

Using Ionic 1.2.4.

This is really a awsome framework but, right now I need to add a event when user click every single item in the tree. would you help me on it?

I take a look at the source code and have no idea on how to make it. sorry.

Jerry

the tree hangs when the total nodes sent to it are 1000+.

i add all things but the list not show
and i my lo show :
http://localhost:8100/%7B%7BbaseUrl%7D%7D/ion-tree-list.css

Great to get this tree list view. I have tried to implement it in my project as a form input and I found out it is hard for me to get the selected(clicked) value. Can you show me way to set ng-model and get the value that I has clicked on a list before I click save button.

Implement drag and drop support allowing item reordering of items (nested or not)

Hi, I find currently when I collapsed some items, and click item of ion-tree-list and enter another page, when I go back, ion-tree-list collapsed status will be initialized. Is it possible to remember collapsed status?

Thanks
tingjun

When there are more items that can fix the screen you cannot scroll to see them

Or maybe something like:

http://play.ionic.io/app/c0206fc71f2a

no description needed

Hi,

We have implemented the ion-tree-list in an Ionic-tabs-app and filled it with an array named componentTree.

<ion-tree-list id="validatetree" items="componentTree" collapsed="true"></ion-tree-list>

When we open in our main-tab by click the template/tab with the ion-tree-list for the first time it's okay.
But when we switch back to the main-tab and open the template/tab with the ion-tree-list for the second time, we get the following error message:

ionic.bundle.js:26794 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in items, Duplicate key: object:68, Duplicate value: {"id":1,"name":"Komponente 1","parentid":0,"isEnabled":true,"tree":[],"Eigenschaften":[{"Seriennummer":"1234","Groesse":20,"Laenge":500,"collapsed":true,"depth":2}],"collapsed":true,"depth":1}
http://errors.angularjs.org/1.5.3/ngRepeat/dupes?p0=item%20in%20items&p1=ob…true%2C%22depth%22%3A2%7D%5D%2C%22collapsed%22%3Atrue%2C%22depth%22%3A1%7D
at ionic.bundle.js:13438
at ngRepeatAction (ionic.bundle.js:42169)
at $watchCollectionAction (ionic.bundle.js:30102)
at Scope.$digest (ionic.bundle.js:30239)
at Scope.$apply (ionic.bundle.js:30503)
at HTMLBodyElement. (ionic.bundle.js:26543)
at defaultHandlerWrapper (ionic.bundle.js:16787)
at HTMLBodyElement.eventHandler (ionic.bundle.js:16775)
at triggerMouseEvent (ionic.bundle.js:2953)
at tapClick (ionic.bundle.js:2942)

The array is created absolutely new each time the template/tab is loaded and i saw in the debugger that there are no duplicates.

Can it be that You need ng-repeat="item in item.tree track by $index"?

From ion-tree-list.tmpl.html:

Or have i to clear the source of the tree?

Thanks in advance!

I need a dynamic tree view where all items are always visible, and the user cannot collapse parts of the tree. Judging from the code, toggleCollapse is hardcoded, so I cannot prevent the collapsing without a hack or custom fork. It would be nice if it were possible to do something like <ion-tree-list collapsible="false" ...>.

I think this would be fairly trivial to implement, I could try to make a patch myself if you prefer that. Would you merge such a patch?

Where can I get the demo source code? thanks!

Hi,

First of all thank you for your plugin.

I'm trying to show some subtrees as collapsed and another ones as not collapsed.

For that I would like to set the call as:

And in the $scope.tasks:

I have tried withouth success. Is that possible?

Thanks in advance!

Yours faithfully,

gsdiama

When the data is large, the load is very slow. How?

i think it would be interresting adding support to ionic 2

I would like you implement the function to add new child to tree?