Kendo TreeView for JQuery used in Angular2+ Apps with Typescript

[Jessica]

Hello,

I currently have a lot of troubles trying to map/wrap/use Kendo Components for JQuery  in an Angular2+ Application with Typescript. This time I have to implement the kendo treeView (and no I am not allowed to use other products and I can not wait till the treeView is implemented for Angular).

So far I can display the treeview component with data from the backend. Now I am struggling with the kendo.ui.TreeViewSelectEvent handling.

This is a shortend version of my so far approach: 

001./// <reference path="../../../../node_modules/@types/kendo-ui/index.d.ts" />
002.
003.// import ...
004.
005.declare var kendo: any;
006.
007./**
008. * Class declaring the TreeViewComponent component
009. */
010.@Component({
011.  'selector': 'dba-folders',
012.  'templateUrl': './folders.component.html',
013.  'styleUrls': ['./folders.component.less']
014.})
015.export class FoldersComponent implements OnInit, OnDestroy {
016.
017.  @ViewChild('treeView') treeViewEl: ElementRef;
018.
019.  /** Member containing the TreeView data */
020.  private treeData: kendo.data.HierarchicalDataSource;
021.  /** Member holding the id of the currently selected folder */
022.  private selectedFolderId: Guid;
023.  /** Member holding the folderData for treeData*/
024.  private folderData: Array<Folder>;
025.
026.  public constructor(private foldersService: FoldersService,
027.    private router: Router) { }
028.
029.  public ngOnInit(): void {
030.    this.generateFolderTree();
031.  }
032.
033.  public ngOnDestroy(): void {
034.    kendo.destroy(this.treeViewEl.nativeElement);
035.  }
036.
037.  private generateFolderTree(): void {
038.    this.foldersService.getFolders().subscribe((result: Folder) => {
039.      this.folderData = new Array<Folder>();
040.      for (let folder of result.subFolders) {
041.        this.folderData.push(folder);
042.      }
043.      this.initTreeData(); // initialize Tree Data
044.      kendo.jQuery(this.treeViewEl.nativeElement).kendoTreeView(this.treeViewOptions()); // set TreeViewOptions for Kendo tree
045.    }, (err) => {
046.      // handle error
047.    });
048.  }
049.
050.  /**
051.   * Call onTreeSelect method after selecting TreeView item to pass id to mediator
052.   * @param {kendo.ui.TreeViewSelectEvent} e
053.   * @memberof FoldersComponent
054.   */
055.  public onFolderSelect(e: kendo.ui.TreeViewSelectEvent): void {
056.    const uid = $(e.node).closest('li').data('uid');
057.    // this.selectedFolderId = this.getFolderWithNodeUidFromTreeView(uid);
058.    let data: Array<MetadataVariant> = new Array<MetadataVariant>();
059.
060.    console.log('UID: ' + uid);
061.
062.    this.foldersService.getGridData(uid, this.router.url).subscribe((result: Array<MetadataVariant>) => {
063.      data = result;
064.      // send data
065.    }, (err) => {
066.      // handle error
067.    });
068.  }
069.
070.  private getFolderWithNodeUidFromTreeView(uid: string): Guid {
071.    const id: Guid = '';
072.    // ??? HERE I NEED THE HELP ???
073.    return id;
074.  }
075.
076.
077.  /**
078.   * Call initTreeData to initialize data in TreeView
079.   */
080.  private initTreeData(): void {
081.    this.treeData = new kendo.data.HierarchicalDataSource({
082.      data: this.folderData,
083.      schema: {
084.        model: {
085.          id: 'id',
086.          children: 'subFolders'
087.        }
088.      }
089.    });
090.  }
091.
092.  /**
093.   * Call treeViewOptions to initialize options in TreeView
094.   */
095.  private treeViewOptions(): kendo.ui.TreeViewOptions {
096.    const options: kendo.ui.TreeViewOptions = {
097.      dataSource: this.treeData,
098.      dataTextField: ['name'],
099.      dragAndDrop: true,
100.      loadOnDemand: true,
101.      select: this.onFolderSelect
102.    };
103.    return options;
104.  }
105.
106.}

 

Thank you all in advance! I am happy for any ideas!

Jessica

[Nencho]

Hello Jessica,

In order to have an access to the component in the Select handler and be able to use the other functions declared in the scope, you should bind it (pass it) trough the options:

 private treeViewOptions(): kendo.ui.TreeViewOptions {
   const options: kendo.ui.TreeViewOptions = {
     dataSource: this.treeData,
     dataTextField: ['name'],
     dragAndDrop: true,
     loadOnDemand: true,
     select: this.onFolderSelect.bind(this)
  };
  return options;
 }

In addition, I noticed the other forum thread, where you had posted another question - regarding the reference to the widget itself, it could be accessed trough the event argument. You can use e.sender in the select event handler, which will grant you with a reference to the widget itself.

Regards,
Nencho
Progress Telerik