Autoscroll tree when search a node

[Materovich]

I have an input to search nodes in an angular treeview and I want the tree to autoscroll to the located node.I saw workarounds for jquery but not for angular one.

[Martin Bechev]

Hi Materovich,

I am afraid that there is no built-in option to auto-scroll to the searched node. What can be done to achieve a similar behavior is to utilize the TreeView focus method and let the browser scroll for you to the focused node. This is the only built-in way that I could suggest up to now:

https://stackblitz.com/edit/angular-hbschd-x37ff1?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[Materovich]

Thanks for your answer, Martin. Your approach works, but in my case I don't know how to get the index value of an specific node. My tree use one of the node object field ('descendant') to display and select like this:

<kendo-treeview
    name="treeview"
    id="treeview"
    [nodes]="filteredTreeNodes"
    kendoTreeViewExpandable
    [(expandedKeys)]="expandedKeys"
    [expandBy]="treeSettings.displayableField"
    [selectedKeys]="selectedKeys"
    [selectBy]="'descendant'"
    kendoTreeViewFlatDataBinding
    idField="descendant"
    parentIdField="ancestor"
    [kendoTreeViewSelectable]="selection"
    (selectionChange)="handleSelection($event)"
    (nodeClick)="handleClick($event)"
    [isSelected]="isItemSelected"
    >

 

To sumarize, I need to access the index value like '0_0_1_1_0_0_0' because with the 'descendant' value like: 'Node A', the focus method will not work.

 

[Dimitar]

Hello Materovich,

The hierarchical index can be built run-time on your end when you submit your search query. Here's an example.

The hierarchical index is built by specifying all parent indices separated by underscores and ending with the targeted node level index. E.g. the first root node will have an index of '0'. It's first child node will have an index of '0_0', the next one will be '0_1' and so on.

The demo uses an Employee model where the idField is employeeId and the parentIdField is reportsTo. It should be converted easily to reflect your configuration though.

Let me know if that would work for you.

Regards,
Dimitar
Progress Telerik