zicrael / ngx-tree-dnd Goto Github PK

Hi @Zicrael, I am using this plugin in one of my app and I want to add a dropdown instead of input at a particular level. Is there any option, that I can get the selected node level in the event while adding or renaming node. So, that I can do my stuff based on node level.

Looks like a very nice tree, but I didn't see a way to mark some items (ie my top level folders) so that they can be locked and not dragged. I realize I could disallow the drop, but this would be a better user experience.

And element 'parent' removing with error.

I wanted to know how I can change the icon of each button on the tree.

currently get have only target but we want all the parent and child records when any changes on tree.

Can i hide main root or root actions button.?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

** remove font-awesome**

how to override a tree template

I have follow same step to resolve this issue as mentioned in this closed issue #46 but i am still not able to resolve this.

I am using <lib-ngx-tree-component [treeData]='youTree' (ondragend)='onDragEnd($event)'> in my component and i have also import the fortawesome in my module and component but still i don't know where we use this import fortawesome(import { faEdit,faMinus,faPlus,faTimes } from '@fortawesome/free-solid-svg-icons';) because i am using <lib-ngx-tree-component [treeData]='youTree' (ondragend)='onDragEnd($event)'> instead of <fa-icon [icon]="faCoffee">.

So, Please provide more clarity to resolve this issue.

Hi @Zicrael , This one is similar to an earlier issue I raised #16 . This time I would like you to provide two separate events when delete button is clicked.

Basically, I would like to ask for confirmation before a node is removed from the tree, so a (onStartDeleteItem) and (onFinishDeleteItem) events would be great!.

Thanks,

Describe the bug
A clear and concise description of what the bug is.
When I use the directive, it can't find the component

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
  Chrome
• Version [e.g. 22]

Additional context
Add any other context about the problem here.
core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'treeData' since it isn't a known property of 'ngx-tree-component'.

1. If 'ngx-tree-component' is an Angular component and it has 'treeData' input, then verify that it is part of this module.
2. If 'ngx-tree-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ngx-tree-component [ERROR ->][treeData]='youTree'>

<ion-content (onload)="testFunc()">
"): ng:///HomePageModule/HomePage.html@12:20
'ngx-tree-component' is not a known element:

1. If 'ngx-tree-component' is an Angular component, then verify that it is part of this module.
2. If 'ngx-tree-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]<ngx-tree-component [treeData]='youTree'>

<ion-content (onload)="testFunc()">
"): ng:///HomePageModule/HomePage.html@12:0
Error: Template parse errors:
Can't bind to 'treeData' since it isn't a known property of 'ngx-tree-component'.

1. If 'ngx-tree-component' is an Angular component and it has 'treeData' input, then verify that it is part of this module.
2. If 'ngx-tree-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ngx-tree-component [ERROR ->][treeData]='youTree'>

<ion-content (onload)="testFunc()">
"): ng:///HomePageModule/HomePage.html@12:20
'ngx-tree-component' is not a known element:

1. If 'ngx-tree-component' is an Angular component, then verify that it is part of this module.
2. If 'ngx-tree-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]<ngx-tree-component [treeData]='youTree'>

<ion-content (onload)="testFunc()">
"): ng:///HomePageModule/HomePage.html@12:0
at syntaxError (compiler.js:1016)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14813)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24000)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:23987)
at compiler.js:23930
at Set.forEach ()
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930)
at compiler.js:23840
at Object.then (compiler.js:1007)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23839)
at syntaxError (compiler.js:1016)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14813)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24000)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:23987)
at compiler.js:23930
at Set.forEach ()
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930)
at compiler.js:23840
at Object.then (compiler.js:1007)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23839)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3815)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)

remove draggable block where dragging it. If drag not finish add on the same place.

How to set right side menu popup like (...) and when on click (...) this menu open dialog for rename/delete option only for child. basically i want drag and drop menu like https://todoist.com

we want also custom button and its custom function can we get it.?

Describe the bug
when onAddItem event triggers returns wrong parentList

To Reproduce
Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/ngx-tree-dnd
2. make a console.log(event) in line 71.
3. Click on add new item button in front of Iphone item.
4. See console that shows the google play as parent not the apple item.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

need fix testing

For empty treeStorage there is TypeError which breaks tree render.

TypeError: Cannot read property 'options' of undefined at NgxTreeService.push../node_modules/ngx-tree-dnd/fesm5/ngx-tree-dnd.js.NgxTreeService.checkTreeLength (ngx-tree-dnd.js:840) at Observable._subscribe (ngx-tree-dnd.js:75) at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42) at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28) at NgxTreeParentComponent.push../node_modules/ngx-tree-dnd/fesm5/ngx-tree-dnd.js.NgxTreeParentComponent.getTreeData (ngx-tree-dnd.js:1057) at NgxTreeParentComponent.set [as treeData] (ngx-tree-dnd.js:941) at updateProp (core.js:22207) at checkAndUpdateDirectiveInline (core.js:21962) at checkAndUpdateNodeInline (core.js:23265) at checkAndUpdateNode (core.js:23227)

NgxTreeService.checkTreeLength method has wrong IF statement. For empty treeStorage (0 is smaller then 2) code tries to read first array item which is non existing by index of zero.

if (this.treeStorage.length < 2) { this.treeStorage[0].options.showDeleteButton = false; } else { try { for (var _b = __values(this.treeStorage), _c = _b.next(); !_c.done; _c = _b.next()) { var el = _c.value; if (el && el.options) { el.options.showDeleteButton = true; } } } catch (e_7_1) { e_7 = { error: e_7_1 }; } finally { try { if (_c && !_c.done && (_a = _b.return)) _a.call(_b); } finally { if (e_7) throw e_7.error; } } }

Possible fix could be?

if (this.treeStorage.length == 0) { // do nothing } else { // no need to remove delete button // if (this.treeStorage.length == 1) { // this.treeStorage[0].options.showDeleteButton = false; // } ...

Package version
"ngx-tree-dnd": "^2.5.0"

Hi @hirenkukadiya @Zicrael,
is there a way to disable the confirmation alert dialog box on delete
a config to enable/disable confirmation alert dialog on delete item

Thanks for the wonderful template.
I just want to know how to disable only the "+" button from third level ?

Hı,

How can I possibly add more fields to TreeModel interface:-

export interface TreeModel {
name: string;
id: number;
code: string;
translateId: string;
options?: TreeItemOptions;
childrens: TreeModel[]; // childrens list
}

and also should show in the view, or maybe add beforeAddItemEvent that can be bind to, by so doing the developer can raise maybe a dialog modal form for data entry for the selected ITEM-ID.

please help.

Thanks in advance.

Can we add the functionality to collapse the folders by default, all folders other than root folder.

Need help when i use multiple instance of the component the + event is not triggering on the correct component

See example codes here:
https://stackblitz.com/edit/ngx-tree-dnd-pj9zw6?file=app%2Ftree%2Ftree.component.ts

Even if i clicked the + icon on the first instance, the last instance of the component gets updated instead

Hi Yaroslav, My problem is ;
When I clicked onDeleteItem(event) button it give me wrong items id for example ;

--> element: {id: 90, name: "iiiii", orderNo: 0, parentCategoryId: null, options: {…}, …}
when I clicked on delete button in child items, it return id:90 when ı clicked id:93 it return id:90 .
it gives me same result with whole clicks
So how can ı fix this ?

thanks,
Ayyildiz

''ERROR TypeError: Cannot read property 'enableDragging' of null".

Need to fix

Hi
I can create field in tree how can some ?
thank you

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is it possible to change the html layout accordingly (want to add icons with node name )

Describe the bug
SVG icon unable to load in production mode in angular

To Reproduce
Steps to reproduce the behavior:

1. Make demo from https://stackblitz.com/edit/ngx-tree-dnd
2. ng build --prod to make build production
3. run application on browser(any)
4. there are not able to see plus,minus,delete button in tree view

Expected behavior
when i see in production build there are missing icon of font-awesome which are useful to manage child and parent of tree.
in console showing to many errors for each icons like :
FontAwesome: Could not find icon with iconName=plus and prefix=fas

Screenshots

I see you have provided (onrenameitem) event, which triggers once the user has updated the node in the tree and clicked on the check mark.

But, can we have an event when the edit button is clicked, because I would like to open a new page when we click on edit button.
Thanks.

Describe the bug
when we click on delete icon(x) and call "onFinishDeleteItem" event the node not removing from myTree variable

To Reproduce
Steps to reproduce the behavior:

1. Go to 'application'
2. Click on 'delete icon and "onFinishDeleteItem" event'
3. See error like myTree variable not updating with deleted node

Expected behavior
i want myTree variable with updated data when click on delete icon (x)

Desktop (please complete the following information):

• OS: [e.g. Windows]
• Browser [chrome]