TreeView in cell template

[ICT]

Hi,

I'm trying to put a Kendo TreeView in a Cell Template.

The rendering is ok, but i cannot expand it ALWAYS when i click, sometimes i can but it starts flickering.

Any suggestion?

Here my template

<ng-template
          kendoGridCellTemplate
          let-dataItem
          let-columnIndex="columnIndex"
          let-rowIndex="rowIndex"
        >
<div *ngIf="column.isTree">
            <kendo-treeview
              [nodes]="columnsService.parse(dataItem[column.field])"
              textField="text"
              kendoTreeViewExpandable
              kendoTreeViewHierarchyBinding
              [isExpanded]="true"
              childrenField="items"
            >
            </kendo-treeview>
          </div>
        </ng-template>

Thanks,

B

[ICT]

[isExpanded]="true" is not correct, i removed it, same issue.

 

B

[Dimitar]

Hello Benedetta,

The described undesired behavior is most probably due to binding the nodes property of the TreeView to a function returning a new array instance on every change detection cycle. I could reproduce it in this simplified example. The tree is flickering as the nodes are recreated anew every time change detection passes.

You have two options to resolve the issue:

• Bind the TreeView to a static array instance - there's no need to parse the data on every change detection cycle. Parsing the data as often could also lead to performance issues if the parsed data set is very large. So you could create a wrapper component for the TreeView which accepts the raw stringified data, parse it only on component init, and pass the processed data to the TreeView.
• Use the TreeView trackBy prop. It allows the component to track the nodes by a specified field, so it won't recreate all the nodes even if a new data array instance is passed on each change detection cycle. Here's an example.

Let me know if further information on the topic is required.

Regards,
Dimitar
Progress Telerik