Autoscroll tree when search a node

4 posts, 1 answers
  1. Materovich
    Materovich avatar
    9 posts
    Member since:
    Jul 2020

    Posted 03 Jul Link to this post

    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.
  2. Martin
    Admin
    Martin avatar
    252 posts

    Posted 06 Jul Link to this post

    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.
  3. Materovich
    Materovich avatar
    9 posts
    Member since:
    Jul 2020

    Posted 07 Jul Link to this post

    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.

     

  4. Answer
    Missing user
    Missing user avatar

    Posted 09 Jul Link to this post

    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.
Back to Top