src/ui/tree-view/smart-tree-list/smart-tree-list.component.ts
| selector | smart-tree-list |
| styleUrls | ./smart-tree-list.component.css |
| templateUrl | ./smart-tree-list.component.html |
Properties |
Methods |
|
Inputs |
Outputs |
constructor()
|
| columnHeadersStatic |
Type : string[]
|
| columnWidths |
Type : string[]
|
| disabled |
Type : boolean
|
| hasChildren |
Type : boolean
|
| height |
Type : number
|
| isSelected |
Type : boolean
|
| items |
Type : SmartTreeViewContextMenuItem[]
|
Default value : []
|
| loadChildren |
Type : any
|
| mainColumnHeader |
Type : string
|
| rootNode |
Type : SmartNode[]
|
| rootNodeExpandedByDefault |
Type : boolean
|
| onContextMenuClick |
Type : EventEmitter<SmartTreeViewContextMenuItem>
|
| onNodeSelection |
Type : EventEmitter<SmartNode>
|
| Public handleCellClick | ||||||
handleCellClick(ev: CellClickEvent)
|
||||||
|
Parameters :
Returns :
void
|
| Public handleContextMenuClick | ||||||
handleContextMenuClick(menuItem: SmartTreeViewContextMenuItem)
|
||||||
|
Parameters :
Returns :
void
|
| handleNodeRightClick | ||||||
handleNodeRightClick(node: any)
|
||||||
|
Parameters :
Returns :
void
|
| disabled |
Type : boolean
|
| treeContextMenuContainer |
Type : ViewContainerRef
|
Decorators :
@ViewChild('treeMenuContainer', {read: ViewContainerRef, static: true})
|
| treeListContainer |
Type : ViewContainerRef
|
Decorators :
@ViewChild('treeListContainer', {read: ViewContainerRef, static: true})
|
<div #treeListContainer>
<div [hidden]="!disabled" [ngStyle]="{ width: '100%', height: '100%' }" class="disabled-overlay"></div>
<kendo-treelist
(cellClick)="handleCellClick($event)"
[fetchChildren]="loadChildren"
(selectionChange)="onNodeSelection.next($event.items[0].dataItem)"
[idField]="'nodeUuid'"
[expandedKeys]="rootNodeExpandedByDefault && rootNode && [rootNode[0]?.nodeUuid]"
[selectable]="{ mode: 'row', multiple: false, drag: false }"
[isSelected]="isSelected"
[resizable]="true"
[hasChildren]="hasChildren"
[height]="height"
[data]="rootNode"
[scrollable]="'scrollable'"
kendoTreeListExpandable>
<kendo-treelist-column
[title]="mainColumnHeader"
[width]="200"
[expandable]="true"
>
<ng-template kendoTreeListCellTemplate let-dataItem>
<img *ngIf="!!dataItem.source.ImageUrl" [src]="dataItem.source.ImageUrl" class="smart-tree-view-node-image">
<span>
{{dataItem.source.NodeValues[0]}}
</span>
</ng-template>
</kendo-treelist-column>
<kendo-treelist-column
*ngFor="let column of columnHeadersStatic let i=index"
[field]="column"
[title]="column"
[width]="columnWidths && columnWidths.length && columnWidths[i]">
<ng-template kendoTreeListCellTemplate let-dataItem>
<div style="width: 100%" [class]="dataItem.source.NodeDataTypes[i+1]">
{{dataItem.source.NodeValues[i+1]}}
</div>
</ng-template>
</kendo-treelist-column>
</kendo-treelist>
</div>
<div class="smart-tree-view-context-menu-container">
<div #treeMenuContainer>
<kendo-contextmenu class="tree-view-context-menu" [items]="items" [target]="treeListContainer" [appendTo]="treeContextMenuContainer" *ngIf="items" (select)="handleContextMenuClick($event.item)">
</kendo-contextmenu>
</div>
</div>
./smart-tree-list.component.css