This is a migrated thread and some comments may be shown as answers.

Autoscroll tree when search a node

3 Answers 221 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Materovich
Top achievements
Rank 1
Veteran
Materovich asked on 03 Jul 2020, 06:54 AM
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.

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 06 Jul 2020, 01:34 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Materovich
Top achievements
Rank 1
Veteran
answered on 07 Jul 2020, 11:52 AM

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.

 

0
Accepted
Dimitar
Telerik team
answered on 09 Jul 2020, 09:55 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
TreeView
Asked by
Materovich
Top achievements
Rank 1
Veteran
Answers by
Martin
Telerik team
Materovich
Top achievements
Rank 1
Veteran
Dimitar
Telerik team
Share this question
or