kendo-ui-angular2 - 在模板中设置kendoTreeViewCheckable参数时无法修改Kendo Treeview中的选中状态

Question

我正在尝试修改 Kendo Treeview 的示例 - 修改选中状态。我对 Kendo 很陌生。我已经翻阅了文档和示例，但似乎无法弄清楚发生了什么。

这是原始的(经过修改以显示是否调用了 isItemChecked)。

import { Component } from '@angular/core';
import { TreeItemLookup } from '@progress/kendo-angular-treeview';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            isItemChecked {{itemChecked}}
        </div>
        <kendo-treeview
            [nodes]="data"
            [children]="children"
            [hasChildren]="hasChildren"
            [isChecked]="isItemChecked"
            (checkedChange)="handleChecking($event)"
            textField="text"
        >
        </kendo-treeview>
        <i>Press SPACE to check/uncheck the active node</i>
  `
})
export class AppComponent {
    public data: any[] = [
        {
          text: "Furniture", items: [
            { text: "Tables & Chairs" },
            { text: "Sofas" }
          ]
        },
        { text: "Decor" },
        { text: "Outdoors" }
    ];

    public children = (dataItem: any): any[] => Observable.of(dataItem.items);
    public hasChildren = (dataItem: any): boolean => !!dataItem.items;

    /* custom check implementation below */

    public checkedKeys: any[] = ["0_0"];
    public itemChecked: boolean = false;

    public isItemChecked = (_: any, index: string) => {
        this.itemChecked = true;
        return this.checkedKeys.indexOf(index) > -1 ? 'checked' : 'none';
    }

    public handleChecking(itemLookup: TreeItemLookup): void {
        this.checkedKeys = [itemLookup.item.index];
    }
}

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

这是相同的代码，除了它使用 [kendoTreeViewCheckable]="{ mode: 'single}"。我还注意到 public checkedKeys: any[] = ["0_0"];没有像它应该的那样选中第一个框。

import { Component } from '@angular/core';
import { TreeItemLookup } from '@progress/kendo-angular-treeview';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            isItemChecked {{itemChecked}}
        </div>
        <kendo-treeview
            [nodes]="data"
            [children]="children"
            [hasChildren]="hasChildren"
            [isChecked]="isItemChecked"
            (checkedChange)="handleChecking($event)"
            textField="text"
            [kendoTreeViewCheckable]="{ mode: 'single' }"
        >
        </kendo-treeview>
        <i>Press SPACE to check/uncheck the active node</i>
  `
})
export class AppComponent {
    public data: any[] = [
        {
          text: "Furniture", items: [
            { text: "Tables & Chairs" },
            { text: "Sofas" }
          ]
        },
        { text: "Decor" },
        { text: "Outdoors" }
    ];

    public children = (dataItem: any): any[] => Observable.of(dataItem.items);
    public hasChildren = (dataItem: any): boolean => !!dataItem.items;

    /* custom check implementation below */

    public itemChecked: boolean = false;
    public checkedKeys: any[] = ["0_0"];

    public isItemChecked = (_: any, index: string) => {
        this.itemChecked = true;
        return this.checkedKeys.indexOf(index) > -1 ? 'checked' : 'none';
    }

    public handleChecking(itemLookup: TreeItemLookup): void {
        this.checkedKeys = [itemLookup.item.index];
    }
}

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

Answer 1

TreeView 组件提供了扩展点，使开发人员能够提供特定的选择、检查或扩展行为。

例如，检查功能需要配置 checkedChange 事件和 isChecked 回调才能正常运行。这正是 kendoTreeViewCheckable 指令所做的。如果它们被覆盖，就像在您共享的演示中一样，那么 内置实现将被完全忽略 。

话虽如此，您需要决定是否需要内置检查行为。 TreeView 使您能够使用可检查设置配置内置行为的特定部分:

https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/CheckableSettings/

如果提供的设置都不能满足您的需求，那么您将需要使用自定义检查指令。您可以基于文档中共享的指令来自定义实现:

https://www.telerik.com/kendo-angular-ui-develop/components/treeview/checkboxes/#toc-modifying-the-checked-state

请注意，它是内置版本的完整副本。