TreeView Nodes Without Children Show as Expandable

[Walter]

My JSON data is generated by a recursive data structure. Where a queue may contain a queue of queues. In the case of a child queue being empty I'd to not show it as expandable. Reworking the data sources is not possible. I'm looking for a pointer on how best to tackle this. I'm building a webified version of a ClickOnce WinForms app. See attached.

 

 

[Walter]

I've been able to programmatically style the TreeView Template (code snippets below) but yet to find he hook to that expand/collapse glyph since it's class name includes a indexing number. Still open to suggestions. 

in queues.component.scss:
    .hit {
       border: 5px solid black;
     }

in queues.component.html:
        <ng-template kendoTreeViewNodeTemplate let-dataItem>  
            <span [ngClass]="iconClass(dataItem)"></span>            
            <span>{{dataItem.Caption}}</span>                
            <span class="custom-right">[{{dataItem.Count}}]</span>       
        </ng-template>


in queues.component.ts:
public iconClass(node: IQueue): any {
          // this detects those nodes that have children nodes
          if (node.Children.length) {
            return 'hit';
          }
     

[Walter]

Results do far. Correctly identifying only three queues that have children.

[Walter]

Results so far. Correctly identifying only three queues that have children. Error occurred on previous post trying to attach graphic.

[Walter]

Sorry for empty post. This site is having an issue with pix upload.

 

"Oh, no! 
Something's not right,
but we're sorting it out."

[Walter]

Pix attached for the above

[Svet]

Hi Walter,

Thank you for the provided screenshots.

I am not sure that I understand the issue.

We can control the expand/collapse icon with the logic inside the hasChildren function as demonstrated in the following sample plunker:

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

Check the "Sofas" node. It has items, which are an empty array:

public data: any[] = [
    {
        text: 'Furniture', items: [
            { text: 'Tables & Chairs' },
            { text: 'Sofas', items: [] },
            { text: 'Occasional Furniture' }
        ]
    },
    {
        text: 'Decor', items: [
            { text: 'Bed Linen' },
            { text: 'Curtains & Blinds' },
            { text: 'Carpets' }
        ]
    }
];

but we are not displaying the collapse icon because of the following logic:

public hasChildren = (item: any) => item.items && item.items.length > 0;

I hope this helps. In case I am missing something please provide some more details as to what needs to be achieved.

Regards,
Svetlin
Progress Telerik

[Walter]

Svetlin,

My plunker above has similar data and similar results to your dojo example. I believe I understand the relationships. My question has more to do with strong typing, but just now I see it's not an issue with accessing node properties. To troubleshoot I changed the code:
public hasChildren = (item: IQueue) => false;           // item.Children && item.Children.length > 0;

and always the nodes have the expand/collapse icon.

[Walter]

Svetlin,

Please, also see Support Ticket ID:1164129 which has more information. Just opened this morning.

[Walter]

kendoTreeViewHierarchyBinding was the culprit; I removed it an it all worked as expected

 

I closed the support ticket.