beforeExpand event is not triggered

aandriichuk commented 7 years ago

Hello. For some reason beforeExpand event is not triggered but itemAddedEvent works fine. Do you have any ideas?

// treeview.component.html

</iui-treeview>

// treeview.component.html

import { Component, ViewEncapsulation, ViewChild, ViewChildren, ViewContainerRef, OnInit } from '@angular/core'; import { IntegralUITreeView } from 'integralui-web/components/integralui.treeview'; import { FileExplorerService } from '../file-explorer.service';

@Component({ selector: 'treeview', template: require('./treeview.component.html'), styles: [require('./treeview.component.css')], encapsulation: ViewEncapsulation.None }) export class TreeViewComponent implements OnInit {

// An Array object that holds all item objects shown in TreeView
// It is set as a list of any custom objects, you can use any custom fields and data bind them with TreeView using its properties
private items: any[];

// Get a reference of application view
@ViewChild('application', { read: ViewContainerRef }) applicationRef: ViewContainerRef;
@ViewChild('treeview') treeview: IntegralUITreeView;

// Editor settings
private isEditActive: boolean = false;
private editItem = null;
private originalText: string = '';
private editorFocused: boolean = false;
private hoverItem = null;

// Initialize items in component constructor
constructor(private fileExplorerService: FileExplorerService) {
    this.items = []; 
}

ngOnInit(): void {
    this.fileExplorerService.getTreeNodes().then(nodes => this.showItems(nodes));
}

showItems(nodes) {
    for (let entry of nodes) {
        this.treeview.addItem(entry);
    }
}

showEditor(item) {
    this.originalText = item.text;
    this.isEditActive = true;
    this.editItem = item;
    this.editorFocused = true;
}

closeEditor() {
    this.editItem = null;
    this.originalText = '';
    this.editorFocused = false;
}

editorKeyDown(e) {
    if (this.editItem) {
        switch (e.keyCode) {
        case 13: // ENTER
            this.closeEditor();
            break;

        case 27: // ESCAPE
            this.editItem.text = this.originalText;
            this.closeEditor();
            break;
        }
    }
}

editorLostFocus() {
    if (this.editItem)
        this.editItem.text = this.originalText;

    this.closeEditor();
}

itemAddedEvent(e) {
    console.log("itemAddedEvent: " + e.item.text);
}

beforeExpandEvent(e) {
    console.log("beforeExpandEvent: " + e.item.text);
}

}

Lidor-Systems commented 7 years ago

Upon checking the code, we notice that code that fires expand/collapse events was disabled in current version, during internal testing. Unfortunately, this remained when current beta version was released.

The fix will be included as part of new update coming next week. This update will also include the Grid and TreeGrid components.

Lidor-Systems commented 7 years ago

We have just released v0.9.0, now the expand/collapse events are fired whenever item is expanded or collapsed.

aandriichuk commented 7 years ago

Thank you. I'll try

aandriichuk commented 7 years ago

I also want ask you do you have examples how to use following methods collapse expand findItemById findItemByText insertItemAfter insertItemBefore insertItemAt removeItem scrollPos toggle

It seems they were not available in previous version but described in documentation here http://www.lidorsystems.com/support/articles/angular/treeview/treeview-component.aspx.

Lidor-Systems commented 7 years ago

As it is explained in the article:

At first Import the IntegralUI TreeView component at heading of your application component

import { IntegralUITreeView } from 'integralui-web/components/integralui.treeview';

Add a variable in HTML specification of the TreeView component

<iui-treeview [items]="data" #treeVariable>
  <template let-item>
       {{item.text}}
  </template>
</iui-treeview>

Use this variable to get a reference to the TreeView

@ViewChild('treeVariable') treeview: IntegralUITreeView;

Use the reference to access public methods

    let item = {
        text: "New Item"
    }

    this.treeview.insertItemAt(item, 0);

Here are method signatures:

insertItemAt(item, index, parent?)
insertItemBefore(item, refItem)
insertItemAfter(item, refItem)
removeItem(item)
removeItemAt(index, parent?)

Methods mentioned:

collapse(item?)
expand(item?)
toggle(item?)
scrollPos(pos?)

are not yet available. We will update the beta version later today, and you can use it.

Documentation is still in works. Soon we will publish a complete API for each component and a User Guide.

Lidor-Systems commented 7 years ago

We have released v0.9.012. Whenever a version is released, check out the Change_Log for more information.

The expand/collapse methods are now available, along with scrollPos method. Their use is simple, for example:

// To expand all items
this.treeview.expand();

// To expand specific item
this.treeview.expand(item);

// To change scroll position from code
// this will move horizontal scroll to 100px and vertical scroll to 500px
this.treeview.scrollPos({ x: 100, y: 500 });

// To get current scroll positon
this.treeview.scrollPos();

Lidor-Systems commented 7 years ago

To use findItemById or findItemByText, at first item objects must have its id or text field set. For example:

this.items.length = 0;
for (let i = 1; i <= 100; i++)
      this.items.push({ id: i, text: "Item" + i });

let item = this.treeview.findItemById(5);
console.log(item);

aandriichuk commented 7 years ago

Thank you!

lidorsystems / integralui-web-angular

beforeExpand event is not triggered #2