TreeView Selection

[Walter]

I wasn't able to get my code to function the way the sample on the API page does. I tried the link "Open As Plunker" but got {"statusCode":404,"error":"Not Found","message":"Not Found"}  My mission is to show that a selected node could update another element on the page (and ultimately would cause an invocation of my RESTapi that fetched data using a field from the selected node. 

[Georgi Krustev]

Hi Walter,

I was able to produce simple plunkr demo based on our documentation.

https://www.telerik.com/kendo-angular-ui/components/treeview/selection/

https://plnkr.co/edit/J7IZ6xILsYohzZu6fydS?p=preview

Probably, a temporary outage of Plunkr service has caused the problematic 404 status code. It should work just fine now.

As to the specific scenario, I would suggest you listen to the selectedKeysChange event and perform the the remote call to the REST service when selected keys has changed.

https://www.telerik.com/kendo-angular-ui/components/treeview/api/SelectDirective/#toc-selectedkeyschange

You can keep the whole selected data item instead of just hierachical index. Use the `selectBy` option to control that behavior.

https://www.telerik.com/kendo-angular-ui/components/treeview/api/SelectDirective/#toc-selectby

Regards,
Georgi Krustev
Progress Telerik

[Walter]

Georgi,

Thanks! Yes, the plnkr worked...as you said it may have been a hiccup, btw I learned there was an "old" and "new" plnkr transition so that to might have contributed.

(see: https://github.com/plnkr/feedback/issues/9 )

Walt

[Walter]

I now am looking at the reverse of the challenge above. I'd like to search the tree (i.e., the contents of each node) after it is fully loaded and get then select the that key. I'm able  to leverage the selectedKeysChange and fire (emit) an event to parent of my component, but need to generalize this. My specific application is "Given the app user's network credentials (user's "name") select that treeview node as the default when app starts-up. 

Do I need to resort to reading the DOM with  @ViewChild('ktree') ktree: TreeViewComponent;

 

[Walter]

Thought a picture can lend a sense of your widget's utility in my case...

[Walter]

Evidently, unable to edit a previous post... I'm also going to need to hide and reduce space consumed by the expand/collapse column. (suggestions?)  I really do not need a click-for-more sub-item "detail" as much as I need a single full-width custom column as part of the tree row/node. You can see I have all nodes expanded at all times.

[Georgi Krustev]

Hi Walter,

The TreeView component binds each group level to specific RxJS Observable, provided by the developer either on the data property or as a result of the fetchChildren callback. That being said, the best way to control the items visibility is through these observables, pushing new data based after it is being filtered.

Check the following demo, which demonstrates how to get access to each group level data and how to push updates. You can utilize this approach to filter the data in each observable and push the filtered result.

http://plnkr.co/edit/HqZxKTqE02KVQ9egh1pJ?p=preview

Examine the categories.service.ts file which demonstrates how to cache the returned BehaviorSubjects and how to push new data through them.

Let me know if I am missing something.

Regards,
Georgi Krustev
Progress Telerik

[Walter]

Georgi, 

Your plnkr is enlightening and will be helpful when I get to the place of doing "work order assignments." Right now I'm trying to do something simpler (as I see it), that is, search the tree.

So, staying with the http://plnkr.co/edit/HqZxKTqE02KVQ9egh1pJ?p=preview example you've built, I'd like to programmatically search for the node containing "Tofu" and then select it.  

[Georgi Krustev]

Hello Walter,

In general, the one should traverse whole loaded data, looking for the specific text. This could be done traversing the cached observables. Once the value is found, the one can build either a hierarchical index or just use the found text as a selection index. Note that the selectBy should be updated to keep a track of the data item text. The only limitation with this approach is that the all related data should be loaded in the component.

I suppose that it will be better to search the data before loading it in the component, as you should have an access to it. Thus you can find the correct item, and its parents. Once this information is available, it could be provided to the component, telling it which nodes to expand and which particular node to select. The configuration should look something like this:

http://plnkr.co/edit/8idfRdUMmOQGgSFQHD8F?p=preview

Regards,
Georgi Krustev
Progress Telerik

[Walter]

Georgi,

Your plunk steered my right! thx. Turns out for my application there's no need for me to traverse the data or DOM given I can select by name (as in your example):

        kendoTreeViewExpandable
        [expandBy]="'CategoryName'"
        [(expandedKeys)]="expandedKeys"
        
        kendoTreeViewSelectable
        [selectBy]="'ProductName'"
        [(selectedKeys)]="selectedKeys"

 

    public expandedKeys: string[] = ['Produce'];
    public selectedKeys: string[] = ['Tofu'];

[Walter]

Georgi,

Thank you for steering me right! You example showed me I can select using a string. This solved exactly my issue and no need for code to traverse the data or DOM. Elegant. 

    kendoTreeViewExpandable
        [expandBy]="'CategoryName'"
        [(expandedKeys)]="expandedKeys"
        
        kendoTreeViewSelectable
        [selectBy]="'ProductName'"
        [(selectedKeys)]="selectedKeys"

    public expandedKeys: string[] = ['Produce'];
    public selectedKeys: string[] = ['Tofu'];

[Walter]

Sorry for the dup posts -- I got an Internal Server Error 500 on the first post so simply composed another. When that succeeded I saw the initial actual made it in...however, Georgi's answer WAS double good.

  :\