Как развернуть все узлы в представлении дерева кендо при инициализации компонента? - PullRequest
Новая
       62

Как развернуть все узлы в представлении дерева кендо при инициализации компонента?

0 голосов
/ 10 ноября 2019

Я слежу за этим документом, чтобы использовать угловой компонент вида дерева кендо для отображения иерархических данных. https://www.telerik.com/kendo-angular-ui/components/treeview/expand-state/

Мое требование заключается в том, что я хочу развернуть все узлы древовидного представления под нагрузкой

В документации Kendo говорится о двух способах сделать это. Либо на основе иерархического индекса, либо на основе имени элемента https://www.telerik.com/kendo-angular-ui/components/treeview/expand-state/#toc-built-in-directives. Дерево в моем случае имеет много уровней и много дочерних элементов на уровне. Следовательно, я не могу перечислить все свои предметы как расширенные ключи.

Мой код такой. Но это расширяет только один элемент, который в данном случае является корнем. 

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Expanded keys: {{expandedKeys.join(",")}}
        </div>
        <kendo-treeview
            [nodes]="data"
            textField="text"
            [hasChildren]="hasChildren"
            [children]="fetchChildren"

            kendoTreeViewExpandable
            [expandBy]="'text'"
            [(expandedKeys)]="expandedKeys"
        >
        </kendo-treeview>
  `
})
export class AppComponent {
    public expandedKeys: any[] = ['Furniture'];

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

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

Я видел решения для типовой проблемы в jquery, упомянутом здесь. https://www.telerik.com/forums/how-do-you-default-a-treeview-to-expanded-on-initialization Может ли кто-нибудь помочь с решением задачи для угловых?

...