在模板

Question

我正在尝试修改Kendo Treeview的示例 - 修改Checked State。我对剑道很新。我已经通过文档和示例倾注，似乎无法弄清楚发生了什么。

这是原始的（显示是否调用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

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